Question

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

Answer 1

并不是说这可能是你正在寻找的东西......但是应该给你一些可以解决的问题......

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;}

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

1 个答案: