Pomoc pri programovaní, odpovede na otázky / html / Nechcené polstrovanie dole na prekrytí obrázka? - html, css, rozloženie, dizajn, výplň

Nežiaduce odsadenie odspodu na prekrytie obrázka? - html, css, rozloženie, dizajn, výplň

Pridal som výplň dna do triedy obrázkov achcel nad obrázkom prekrytie kurzora myši, ale presahuje obrázok vrátane pridanej výplne. Existuje spôsob, ako zabezpečiť, aby sa kurzor pohyboval iba nad šírkou a výškou obrázka bez polstrovania? Vďaka!

.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="/images/http://i65.tinypic.com/2l8w0hc.jpg" alt="" />
</div>

<div data-content="Here is a caption" class="work-image">
<img src="/images/http://i64.tinypic.com/2zodetx.jpg" alt="" />
</div>

odpovede:

1 pre odpoveď č. 1

sťahovať vertical-align: bottom; z .work-image na .work-image img, a nahradiť padding-bottom s 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="/images/http://i65.tinypic.com/2l8w0hc.jpg" alt="" />
</div>

<div data-content="Here is a caption" class="work-image">
<img src="/images/http://i64.tinypic.com/2zodetx.jpg" alt="" />
</div>