イメージオーバーレイの不要なパディング - ボトム？

Question

イメージクラスにパディングボトムを追加し、イメージ上にホバーオーバーレイを追加したいが、それは追加されたパディングを含むイメージを越えて伸びる。ホバーがイメージの幅と高さだけをパディングしないようにする方法はありますか？ありがとう！

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

Answer 1

.work-imageから.work-image imgに移動vertical-align: bottom;、およびmargin-bottomとpadding-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>