Black overlay on image disable hover

user_13864686 0
Viewed 30

I have a black overlay on the image and disabled image hover, I know it is stacked on the image but how I can solve this? I wanna hover the image and grayscale change from 1 to zero and overlay still there, my code down below thanks for your help.

.box{
width:300px;
height:200px;
position: relative;

}

.image{
width:100%;
height:100%;
object-fit: cover;
filter:grayscale(1);
}

.image:hover{
filter:grayscale(0)
}

.black_layer{
        position: absolute;
    width:100%;
height:100%;
top:0;
left:0;
background-color:black;
z-index:1;
opacity:.3;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>

<div class="box">
<img  src="https://images.unsplash.com/photo-1616578738046-8d6bbb4ee28e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fGFyY2hpY3R1cmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" class="image"  />

<div class="black_layer"></div>
   
</div>
  
</body>
</html>

css html
1 Answers

Instead of hover on the image (what will never work because of the black layer on top of it), hover on the container .box and than target the content image:

.box:hover img{ .... }

(note: changed the backgroundcolor of the top layer to yellow to make the effect more visable)

.box{
width:300px;
height:200px;
position: relative;

}

.image{
width:100%;
height:100%;
object-fit: cover;
filter:grayscale(1);
}

.box:hover img{
filter:grayscale(0)
}

.black_layer{
        position: absolute;
    width:100%;
height:100%;
top:0;
left:0;
background-color:yellow;
z-index:1;
opacity:.3;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>

<div class="box">
<img  src="https://images.unsplash.com/photo-1616578738046-8d6bbb4ee28e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fGFyY2hpY3R1cmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" class="image"  />

<div class="black_layer"></div>
   
</div>
  
</body>
</html>

user_16851960
Related