JSFiddle - React, Tailwind, and code Playground

HTML

<div id="systemBodyYeWu">

<a href="https://parola.codeplex.com/releases" target="_blank">
<img src="http://static1.grsites.com/archive/textures/blgr/blgr067.gif"/>
<span class="text-content"><span>Parola for Arduino</span></span>
</a>

<a href="https://parola.codeplex.com/releases" target="_blank">
<img src="http://static1.grsites.com/archive/textures/blgr/blgr067.gif"/>
<span class="text-content"><span>Parola for Arduino</span></span>
</a>

</div>

CSS

#systemBodyYeWu a:hover span.text-content {
opacity: 1;
}

#systemBodyYeWu {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
 
#systemBodyYeWu a {
display: inline-block;
/*margin: 0 1em 1em 0;*/
position: relative;
height: 78px;
width: 78px;
}
 
#systemBodyYeWu span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}

#systemBodyYeWu span.text-content {
color: black;
cursor: pointer;
display: table;
left: 0;
position: absolute;
top: 0;
height: 78px;
width: 78px;
}

#systemBodyYeWu span.text-content:hover {
background: rgba(0,0,0,0.25);
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}