Black overlay on image disable hover-CodePudding

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 >
<img  src="https://images.unsplash.com/photo-1616578738046-8d6bbb4ee28e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fGFyY2hpY3R1cmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60"   />

<div ></div>
   
</div>
  
</body>
</html>

CodePudding user response：

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 >
<img  src="https://images.unsplash.com/photo-1616578738046-8d6bbb4ee28e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fGFyY2hpY3R1cmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60"   />

<div ></div>
   
</div>
  
</body>
</html>