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

Question

[Ne0n5amura1]

При наведении на картинку все остальное затемняется, остается с оригинальной яркостью только картинка с hover'ом.

Answer 1

[Ankhena]

1 строчка

img:hover {
box-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.8);
}

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

Возможно, потребуется еще z-index, в зависимости от того, что у Вас еще в макете творится.

Answer 2

[Pavel K]

https://jsfiddle.net/bd19yxxd/1/

Answer 3

[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;
}