<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?