Javascript 在井内悬停时向引导缩略图图像添加覆盖

我有一个引导程序。在井里我有一个缩略图像。我想做的是，每当我将鼠标悬停在图像上方时，我希望在图像顶部有一个黑色覆盖层，例如rgba（0,0,0,0.5）。目前，我所拥有的是：

.

您可以在我的代码笔上看到实际代码和当前输出（有点长）：

---

正如您从画笔中看到的，当我将鼠标悬停在图像上时，会出现覆盖，但在实际图像下方，而不是在图像上。理想情况下，我希望在调整屏幕大小（例如手机屏幕）时，覆盖层应与图像成比例。我试着询问媒体，但这是一个非常糟糕的想法。如何使覆盖层位于图像顶部，从而消除井底多余的空间？

为此，您可以将其父层的显示设置为

relative

，并使用位置

绝对

和顶部和左侧

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>

以及html：

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

让我试一试，因为我的结构有点烦人。试一试，看看哪一个解决方案适合你。第二个解决方案奏效了，但是，我的目标是当覆盖层置于悬停的顶部时，使按钮位于图像的中心，你知道怎么做吗？是的，给按钮

{position:absolute；left:50%；top:50%；translate（-50%，-50%）；}

当然，覆盖必须具有相对位置

。这是另一个问题。你得到了这个问题的答案，对吗？；）我确实得到了答案是的，哈哈！所以现在我需要让按钮正确定位
<div class="parent">
    <img src="image.png" />
</div>