How to add a black shadow on top of a div block with background image?

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

Browse More Popular Posts

Leave a Comment