如何在不设置图像高度的情况下添加图像叠加效果

Question

如何在不设置图像高度的情况下添加图像叠加效果。 我在滑块上有不同尺寸的图像，而将鼠标悬停在所有图像上，我需要具有叠加效果的文本“查看大图像”，并且它应该弹出。 *注意：图像高度不同

Answer 1

并不是说这可能正是您正在寻找的东西...但应该可以为您提供一些工作......

https://jsfiddle.net/112y4mwt/

HTML

<div class="holder">
    <div class="overlay">View Larger</div>
    <img src="https://s-media-cache-ak0.pinimg.com/736x/22/5d/20/225d20eaadbd3d7a3012c73e8b1119da.jpg" height="200px"/>
</div>

<div class="holder">
    <div class="overlay">View Larger</div>
    <img src="https://s-media-cache-ak0.pinimg.com/736x/22/5d/20/225d20eaadbd3d7a3012c73e8b1119da.jpg" height="250px"/>
</div>

<div class="holder">
    <div class="overlay">View Larger</div>
    <img src="https://s-media-cache-ak0.pinimg.com/736x/22/5d/20/225d20eaadbd3d7a3012c73e8b1119da.jpg" height="300px"/>
</div>

CSS

.holder {float:left; position:relative; overflow:hidden;}

.overlay {
    display:none;
    position:absolute;
    width:100%; height:100%;
    text-align:center;
    background-color:rgba(0,0,0,.8);
    color:white;
}

.holder:hover .overlay {display:block;}