JSFiddle - React, Tailwind, and code Playground

HTML

<div class="overlay">
  <img src="http://placehold.it/400x200"/>
  <div class="info">
    <a href="#">GO</a>
    <span>Title</span>    
    <p>Some information text</p>
  </div>
</div>

CSS

.overlay {
    display:inline-block;
    position:relative;
}
.overlay img {
    display:block;
}
.overlay img:hover + .info, .info:hover {
    opacity:1;
}
.info {
    opacity:0;
    background-color: rgba(240,240,240,0.5);
    padding: 8px;
    text-align: center;
    position:absolute;
    top:0; right:0;
    bottom:0; left:0;
    transition:all .5s;
}