如何制作与图像大小完全匹配的 div 覆盖

Question

我正在创建一个网站，希望用户能够将鼠标悬停在图像上并获取有关该图像的更多信息。我可以正常工作，但我不知道如何使未选择的其他图像变暗。理想情况下，我想使用 html 和 css 创建一个与响应式图像的尺寸完全匹配的覆盖 div。当未将鼠标悬停在该覆盖 div 上时，将使用透明颜色使图像稍微变暗。我怎样才能让这个 div 响应图像？

这是我的代码笔，看看我在说什么 https://codepen.io/klaurtar/pen/NJgrOR

.overlay {
    width: 55%;
    position: absolute;
    background-color: rgba(0, 0, 0, .5);

    z-index: 10;

    &--p1 {
        left: 0;
        top: -2rem;
        height: 20rem;
    }

    &--p2 {
        right: 0;
        top: 2rem;
        height: 20rem;
    }

    &--p3 {
        left: 20%;
        top: 10rem;
        height: 22rem;
    }
}

Answer 1

.wrapper {
  position: relative;
  display: inline-block;
}

.overlay {
  position: absolute;
  z-index: 1;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color: #000;
  opacity:0.8;
}

<div class="wrapper">
  <img src="https://unsplash.it/320/240" />
  <div class="overlay"></div>
</div>