JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="background-img">
          <img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT_1tKSY61_ZLpmpR0PWO784otZulHIMgrNLECJ-Te8HwvqoXMJZv8GYDo" alt="Generic placeholder image">
                  <div class="overlay">
                  <span>Text</span>
                  </div>
     </div>            
</div>

CSS

.background-img .overlay{
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}

.background-img .overlay {
    opacity: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 51, 51, 0.5);
}
.container{position:relative;
  max-width:300px;
  }

.container img{width:100%;
display:block;
 }