<style>
.image{
background-image:url(https://www.w3schools.com/w3images/natureboy.jpg);
background-size:cover;
width:200px;
height:200px;
cursor:pointer;
}
.blackLayer{
width:100%;
height:100%;
background-color:#000;
opacity:0.5;
}
.blackLayer:hover{
opacity:0;
}
</style>
<div class="image">
<div class="blackLayer"></div>
</div>
solved How to add a black shadow on top of a div block with background image?