How to add color overlay on an image

Question

So I have an image. I need to put a color overlay rgba(56, 59, 64, 0.7) on top of this image.

HTML:

<div class="home">
   <img src="http://via.placeholder.com/350x150" />
</div>

CSS:

.home img {
  width: 100%;
  padding: 0;
  margin: 0;
}

.home img {
  width: 100%;
  padding: 0;
  margin: 0;
}
    

<div class="home">
   <img src="http://via.placeholder.com/350x150" />
</div>

Answer 1

Here you go

.home {

}

img {
  width: 100%;
  padding: 0;
  margin: 0;
  display:block;
}

.wrap {
  position:relative;
}

.wrap:before {
  content:"";
  position: absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background: rgba(0,0,0,0.5);
  z-index:999;
}

<div class="home">
<div class="wrap">
   <img src="http://via.placeholder.com/350x150" />
 </div>
</div>