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;
  z-index: 1;
  webkit-transition: .3s;
  transition: .3s;
}
div.photo:hover .text { font-size: 100px; color: #000; }

div.photo:before {
  display: inline-block;
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color:#ccc;
  opacity: 0;
  z-index: 0;
  webkit-transition: .3s;
  transition: .3s;
}
div.photo:hover:before {
  opacity:0.8;
}