JSFiddle - React, Tailwind, and code Playground

by benhowdle89

HTML

<div class="picwrapper">
    <div class="pic"><a href="http://www.copywritingisart.com/copywriting-portfolio/hercules/"><img src="http://www.copywritingisart.com/wp-content/uploads/2014/07/hercules_2014_logo-300x187.jpg" alt="" width="300" height="187" /> <span class="text-content"><span>Direct response</span></span> </a>
    </div>
    <div class="pic"><a href="http://www.copywritingisart.com/copywriting-portfolio/tough-mudder/"><img src="http://www.copywritingisart.com/wp-content/uploads/2014/07/tough-mudder-orange-border1-300x188.jpg" alt="" width="300" height="188" /></a>
    </div>

CSS

div.picwrapper {
    width:100%;
    text-align:center;
}

div.pic {
    position: relative;
    display: inline-block;
    padding:5px 5px 5px 5px;
}
 
span.text-content span {
  position: relative;
  top: 50%;
  transform: translateY(-50%); 
}

div.pic:hover span.text-content {
  opacity: 1;
}


span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  height: 187px;
  left: 5px;
  position: absolute;
  top: 5px;
  bottom: 0;
  right: 0;
  width: 300px;
  opacity: 0;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}