我一直在尝试实现类似于此的 CSS 图像悬停 example .我无法让悬停包含在我的图像中。
可能很重要的一点是,我使用的是 Zurb Foundation 和“large-block-grid”类。干杯。
我的 HTML:
<div class="recent-work">
<div class="row">
<div class="large-12 columns">
<ul class="large-block-grid-2">
<li>
<a href="#">
<div class="caption"><span>First Image Hover</span></div>
<img src="http://hhhhold.com/577x577">
</a>
</li>
<li>
<a href="#">
<div class="caption"><span>Second Image Hover</span></div>
<img src="http://hhhhold.com/577x577">
</a>
</li>
</ul>
</div>
</div>
</div><!-- End recent-work -->
我的 CSS:
.recent-work {
margin: 0 0 50px;
}
// Img hovers
.caption span {
top: 50%;
}
ul.large-block-grid-2 .caption {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
opacity: 0;
background-color: rgba(245, 64, 77, 0.75);
background-color: rgba(245, 64, 77, 0.25);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(245, 64, 77, 0.25)), color-stop(100%, #f5404d));
background-image: -webkit-linear-gradient(rgba(245, 64, 77, 0.25), #f5404d);
background-image: linear-gradient(rgba(245, 64, 77, 0.25), #f5404d);
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
-webkit-transform: translate3d(0, 0, 0);
}
ul.large-block-grid-2 .caption span {
padding: 1rem;
position: relative;
top: 52%;
opacity: 0;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
ul.large-block-grid-2 a:hover .caption {
opacity: 1;
}
ul.large-block-grid-2 a:hover .caption span {
top: 48%;
opacity: 1;
}
最佳答案
这是一个 Fiddle
img {
width: 100%;
height: 100%;
}
ul li {
list-style: none;
float: left;
width: 400px;
height: 400px;
margin: 0 10px 10px 0;
}
ul.large-block-grid-2 .caption {
position: absolute;
display: inherit;
width: 400px;
height: 400px;
text-align: center;
opacity: 0;
background-color: rgba(245, 64, 77, 0.75);
background-color: rgba(245, 64, 77, 0.25);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(245, 64, 77, 0.25)), color-stop(100%, #f5404d));
background-image: -webkit-linear-gradient(rgba(245, 64, 77, 0.25), #f5404d);
background-image: linear-gradient(rgba(245, 64, 77, 0.25), #f5404d);
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
-webkit-transform: translate3d(0, 0, 0);
}
关于html - CSS 图像标题悬停与过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18839967/