<div class="overlay">
  <img src="https://i.pinimg.com/originals/a6/e8/c0/a6e8c0241c295bb808c6e38374df5a1e.jpg" alt="">
  <span></span>
</div>
div {
  position: relative;
  display: inline-block;
}
img {
  display: block;
  max-width: 250px;
}
span {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: #bac5ce;
  opacity: 0.5;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.