JSFiddle - React, Tailwind, and code Playground

HTML

<div id="img">
     <a href="https://parola.codeplex.com/releases" target="_blank">
       <img src="http://www.pedroduino.com/custom pd/images/Parola-Icon.gif" />
       <span class="text-content"><span>Parola for Arduino</span></span>
     </a>
 </div>

CSS

/*This is the img code*/
#img:hover span.text-content {
opacity: 1;
}

#img {
height: 213px;
position: relative;
width: 183px;
left: 100px;
top: 100px;
}

/*This is the text hover/animation code*/
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 213px;
left: 0;
position: absolute;
top: 0;
width: 183px;
font-size:40px;
}
 
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}

span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 213px;
left: 0px;
position: absolute;
top: 0px;
width: 183px;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}