jquery - 创建图像叠加层

Question

我在页面上有一张图片和一个带有信息文本的 div Code Pen Example .

<div>
  <img src="http://placehold.it/400x200"/>
  <div class="info">
    <a href="#">GO</a>
    <span>Title</span>    
    <p>Some information text</p>
  </div>
</div>

我希望 div 信息不可见，当我将鼠标移到图像上时，div 会显示在图像上，具有透明度，并且与图像的宽度和高度完全相同。

我希望 div 信息内的 anchor 位于右上角。我该怎么做？

Answer 1

不需要 jQuery。

需要相对定位父元素，.overlay。如果您希望它采用 img 元素的尺寸，您还可以将显示更改为 inline-block。绝对定位 .info 元素以采用与父元素相同的大小。使用 rgba() 颜色实现透明度。使用选择器 .overlay img:hover + .info, .info:hover 将 .info 元素的显示更改为悬停时的 block在 img 和 .info 元素上。

Example Here

.overlay {
    display:inline-block;
    position:relative;
}
.info {
    display:none;
    background-color: rgba(240,240,240,0.5);
    padding: 8px;
    text-align: center;
    position:absolute;
    top:0; right:0;
    bottom:0; left:0;
}
.overlay img:hover + .info, .info:hover {
    display:block;
}

如果您希望叠加层淡入淡出/过渡，只需操纵元素的 opacity 而不是更改显示。 (example) .

要获得更好、更详细的答案 - 请参阅 my other answer here .