Day158 — draw an overlay on an image using CSS

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

Reference:

How to add color overlay on an image