javascript - 在井内悬停时向 Bootstrap 缩略图图像添加叠加层

Question

我有一个很好的 Bootstrap 。在井内，我有一个缩略图。我想做的是，每当我将鼠标悬停在图像上时，我希望图像顶部有一个黑色覆盖层，例如RGBA(0,0,0,0.5)。目前，这就是我所拥有的:

.

您可以在我的 Codepen 上看到实际代码和当前输出(有点长):click here for what I currently have

正如您从 Pen 中看到的那样，当我将鼠标悬停在图像上时，会出现叠加层，但在实际图像下方，而不是在图像上。理想情况下，我希望它以这样的方式放置，当我调整屏幕大小时，例如对于手机，叠加层应与图像保持比例。我尝试过媒体查询，但这是一个非常糟糕的主意。我怎样才能使叠加层位于图像的顶部，从而消除井底部的多余空间？

Answer 1

为此，您可以将其父项的显示设置为relative，并添加图像和叠加层，位置为absolute，顶部和左侧为0;将叠加层的不透明度设置为 0 并在鼠标悬停时将其设置为 .5

    .parent{
    position:relative;
    width:100px;
    height:100px;
    }

.parent img, .parent .overlay{
position:absolute;
left:0;
top:0;
width:100px;
height:100px;
}

.parent .overlay{opacity:0;}
.parent .overlay:hover{opacity:.5;}

html 将是:

<div class="parent">
    <img src="image.png" />
    <div class="overlay">
</div>

但我推荐另一种解决方案，您只需为其父级提供黑色背景，并在悬停时将图像的不透明度设置为 .5:

.parent{backgound:#000;}
.parent img:hover{opacity:.5}

和 html:

<div class="parent">
    <img src="image.png" />
</div>