Html CSS图像标题悬停,带过渡
我一直在尝试实现类似于此的CSS图像悬停。我无法将悬停包含到我的图像中 很重要的一点是我要使用ZURB基金会和“大块网格”类。干杯 我的HTML:Html CSS图像标题悬停,带过渡,html,css,css-transitions,zurb-foundation,Html,Css,Css Transitions,Zurb Foundation,我一直在尝试实现类似于此的CSS图像悬停。我无法将悬停包含到我的图像中 很重要的一点是我要使用ZURB基金会和“大块网格”类。干杯 我的HTML: <div class="recent-work"> <div class="row"> <div class="large-12 columns"> <ul class="large-block-grid-2"> <li> <a
<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 -->
这里有一个
此解决方案在大屏幕上正常工作,但在较小屏幕(iPhone和Galaxy)上,滚动比图像大。无论如何,关于如何修复它的建议?尝试设置
img{width:400px;height:400px;}
Nope运气不好,它会损坏到图像的右侧。
.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;
}
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);
}