JSFiddle - React, Tailwind, and code Playground

by aflynt

HTML

<div class="bkg" style="background-image: url('http://www.wildcatconservation.org/wp-content/uploads/2013/03/2016-sand-cat-group.jpg')"></div>

CSS

.bkg {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 300px;
  position: relative;
  width: 100%;
}

.bkg:after {
  content: '';
  height: inherit;
  left: -2px;
  position: absolute;
  top: 0;
  width: 100%;
}

.bkg:hover:after {
  background: rgba(0,0,0,0.4);
}