JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<div class="bg"></div>
<img src="http://itd3.mycdn.me/image?id=851166905041&t=20&plc=WEB&tkn=*dHTbLgZHNUFe027ldT-xhI8JZ1Y">

</div>

CSS

div{
  margin:0 auto;
  width:500px;
  position:relative;
  overflow:hidden;
}
img{
  width:500px;
}
.bg{
  position:absolute;
  width:100%;
  height:100%;
  background: linear-gradient(to right, blue, purple);
  opacity:0.7;
}