Ne0n5amura1
@Ne0n5amura1
Lixach

Как сделать эффект затемнения фона при наведении на картинку?

При наведении на картинку все остальное затемняется, остается с оригинальной яркостью только картинка с hover'ом.
  • Вопрос задан
  • 12485 просмотров
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
1 строчка
img:hover {
box-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.8);
}

Реализация: codepen.io/anon/pen/KrQENE

Возможно, потребуется еще z-index, в зависимости от того, что у Вас еще в макете творится.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
PavelK
@PavelK
Ответ написан
Комментировать
@ArturArturov
можно что-то такое
$('img').each(function () {
                $(this).hover(
                    function () {
                        $(this).css('z-index', 99999);
                        $('body').addClass('hover_img');
                    },
                    function () {
                        $(this).css('z-index', 1);
                        $('body').removeClass('hover_img');
                    });
            });

body.hover_img{
  position: relative;
  &:before{
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    z-index: 99998;
  }
}
img{
  position: relative;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы