Блог

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

Вот мой codepen, чтобы понять, о чем я говорюhttps://codepen.io/klaurtar/pen/NJgrOR

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

    z-index: 10;

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

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

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