JSFiddle - React, Tailwind, and code Playground

HTML

<div class="photo">
  <img src="http://www.planwallpaper.com/static/images/butterfly-wallpaper.jpeg" />
  <div class="text">Its transparent</div>
</div>

CSS

html, body { margin: 0; padding: 0; }

div.photo { max-width: 100vw; width: 100vw; position: relative; }
div.photo img { max-width: 100%; }
div.photo .text {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  text-align: center;
  font-size: 26px;
  color: #fff;
  webkit-transition: .3s;
  transition: .3s;
}

div.photo:hover .text {
  opacity:0.8;
  background-color:#ccc;
}