JSFiddle - React, Tailwind, and code Playground

HTML

<a href="" class="img">
  
</a>

CSS

.img{
  display: block;
  width:200px;
  height:200px;
  background: url('http://i.stack.imgur.com/Sjsbh.jpg');
  background-size: 200px 200px;
  position: relative;
}
.img:hover::after {
    content:'This is a description';
    position: absolute;
    width:100%; 
    height:20%;
    bottom:0; left:0;
    background: rgba(255, 255, 255, 0.8);
}