Aiuto nella programmazione, risposte alle domande / html / Imbottitura in basso indesiderata sulla sovrapposizione di immagini? - html, css, layout, design, padding

Imbottitura indesiderata: parte inferiore della sovrapposizione di immagini? - HTML, CSS, layout, design, imbottitura

Ho aggiunto un fondo imbottito a una classe di immagini edesiderava una sovrapposizione al passaggio del mouse sull'immagine, ma si estende oltre l'immagine inclusa la spaziatura interna aggiunta. C'è un modo per assicurarsi che il passaggio del mouse si estenda solo sulla larghezza e l'altezza dell'immagine senza riempimento? Grazie!

.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>

risposte:

1 per risposta № 1

Mossa vertical-align: bottom; a partire dal .work-image a .work-image imge sostituire padding-bottom con 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>