我在图像类中添加了一个填充底部,并希望在图像上有一个悬停叠加层,但它超出了图像,包括添加的填充。有没有办法确保悬停只跨越图像宽度和高度而没有填充?谢谢!
.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>
最佳答案
将 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>
关于html - 图像叠加上不需要的填充底部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45197762/