JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hoverable">
 
 <div class="content">
   Really nice in here
 </div>
</div>

CSS

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

.hoverable {
  width: 80%;
  height: 50vh;
  background-image: url('http://media.wella.com/professional/m/_master/homepage/Home%20Gallery%20Item/for-all-latest-news_d.jpg');
  background-size: contain;
}

.hoverable:hover .content {
  background: -webkit-linear-gradient(rgba(200, 200, 60, 0) 0%, rgba(200, 0, 60, 0.5) 100%);
  background: -moz-linear-gradient(rgba(200, 200, 60, 0) 0%, rgba(200, 200, 60, 0.5) 100%);
  background: -o-linear-gradient(rgba(200, 200, 60, 0) 0%, rgba(200, 200, 60, 0.5) 100%);
  background: linear-gradient(rgba(200, 200, 60, 0) 0%, rgba(200, 200, 60, 0.5) 100%);
}

.content {
  width: 100%;
  height: 80%;
  color: black;
}