JSFiddle - React, Tailwind, and code Playground

HTML

<div class="img">
  <img class="prod" src="http://imguol.com/c/entretenimento/5a/2016/06/13/skyrim-special-edition-1465798804017_300x200.jpg">
<div class="descP"><p>Skyrim Special Edition</p></div>
</div>

<div class="img">
  <img class="prod" src="http://hdqwalls.com/wallpapers/thumb/grand-theft-auto-trevor.jpg">
<div class="descP"><p>GTA V</p></div>
</div>

CSS

.img{
  position: relative;
  width: 300px;
  height: 200px;
  cursor: pointer;
  display: inline-block;
}

.prod{
  position: absolute;
  z-index: 1;
}

.descP{
  position: absolute;
  bottom: 0;
  z-index: 2;
  width: 100%;
  height: 50px;
  background: rgba(255,0,0,0.7);
  color: #fff;
  visibility: hidden;
}

.img:hover > .descP{
    visibility: visible;
}

.descP p{
  font-family: verdana;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
               0px 8px 13px rgba(0,0,0,0.1),
               0px 18px 23px rgba(0,0,0,0.1);
}