$('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;
}.hover:hover{
animation: hover .6s;
}
@keyframes hover {
50% { transform: scale(0.8); }
}<body data-you-var-from-php='{"x": 1000, "y": 2000}'>