JSFiddle - React, Tailwind, and code Playground

by Derek Wood

HTML

<div class="parent">
  <img src="http://placehold.it/200" alt="">
  <div class="child">
    <span>stuff</span>
  </div>
</div>


<div class="parent">
  <div class="child">
    <span>stuff</span>
  </div>
</div>

CSS

.parent {
  position: relative; /* define context for absolutly positioned children */
  /* size set by image in this case */
  background-color: red;

  display: inline-block;
  
  width: 200px;
  height: 200px;
  
  background-color: lightgreen;
  background-image: url('https://placehold.it/400');
  background-size: cover;
  background-position: center center;
}

.parent img {
  display: block;
}

.parent:after {
  content: ''; /* :after has to have a content... but you don't want one */
  
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(0,0,0,0);

  transition: 1s;
}

.parent:hover:after {
  background: rgba(0,0,0,.5); 
}

.parent:hover .child {
  opacity: 1;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  z-index: 5; /* only works when position is defined */ 
  /* think of a stack of paper... this element is now 5 higher than the bottom */

  color: white;

  opacity: 0;
  transition: .5s;
}