我在图像类中添加了一个填充底部,并希望在图像上悬停覆盖,但它会延伸到图像之外,包括添加的填充。有没有办法确保悬停跨越图像的宽度和高度没有填充?谢谢!
.work-image {
width: 100%;
height: 100%;
position: relative;
padding-bottom: 15px;
vertical-align: bottom;
}
.work-image img {
width: 100%;
}
.work-image:after, .work-image:before {
opacity: 0;
position: absolute;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.work-image:after {
top: 0;
left: 0;
width: 100%;
height:100%;
content: '\A';
background:rgba(0,0,0,0.6);
}
.work-image:before {
top: 50%;
z-index: 1;
width: 100%;
color: #fff;
text-align: center;
transform: translateY(-50%);
content: attr(data-content);
}
.work-image:hover:after, .work-image:hover:before {
opacity:1;
}
<div data-content="Here is a caption" class="work-image">
<img src="http://i65.tinypic.com/2l8w0hc.jpg" alt="" />
</div>
<div data-content="Here is a caption" class="work-image">
<img src="http://i64.tinypic.com/2zodetx.jpg" alt="" />
</div>
答案 0 :(得分:1)
将vertical-align: bottom;
从.work-image
移至.work-image img
,并将padding-bottom
替换为margin-bottom
。
.work-image {
width: 100%;
height: 100%;
position: relative;
margin-bottom: 15px;
}
.work-image img {
width: 100%;
vertical-align: bottom;
}
.work-image:after, .work-image:before {
opacity: 0;
position: absolute;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.work-image:after {
top: 0;
left: 0;
width: 100%;
height:100%;
content: '\A';
background:rgba(0,0,0,0.6);
}
.work-image:before {
top: 50%;
z-index: 1;
width: 100%;
color: #fff;
text-align: center;
transform: translateY(-50%);
content: attr(data-content);
}
.work-image:hover:after, .work-image:hover:before {
opacity:1;
}
<div data-content="Here is a caption" class="work-image">
<img src="http://i65.tinypic.com/2l8w0hc.jpg" alt="" />
</div>
<div data-content="Here is a caption" class="work-image">
<img src="http://i64.tinypic.com/2zodetx.jpg" alt="" />
</div>