圖像覆蓋圖上不需要的填充底部？

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

移動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>