0
Ich habe einen Bildunterteil zu einer Bildklasse hinzugefügt und wollte ein Hover-Overlay über das Bild, aber es reicht über das Bild hinaus, einschließlich des hinzugefügten Padding. Gibt es eine Möglichkeit, sicherzustellen, dass der Hover nur die Bildbreite und -höhe ohne Padding überspannt? Vielen Dank!Unerwünschte Polsterunterseite bei Bildüberlagerung?
.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>