Как сделать наложение div, точно соответствующее размеру изображения

Question

Я создаю веб-сайт и хотел бы, чтобы пользователь мог навести указатель мыши на изображение и получить больше информации об изображении. У меня это работает правильно, но я не могу понять, как затемнить другие изображения, которые не выбраны. В идеале я хотел бы создать оверлейный div, используя html и css, который точно соответствует размерам адаптивного изображения. Если не навести курсор на этот оверлей, то будет использовать прозрачный цвет, чтобы немного затемнить изображение. Как я могу сделать этот 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>