JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <div class="image"><img src="http://mi-soft.nl/images/SQUARE.png"/></div>
        <div class="overlay">
            <a href = "#"> 1 </a>
            <a href = "#"> 2 </a>
            <a href = "#"> 3 </a>
        </div>
    </li>
     <li>
        <div class="image"><img src="http://mi-soft.nl/images/SQUARE.png"/></div>
        <div class="overlay">
            <a href = "#"> 1 </a>
            <a href = "#"> 2 </a>
            <a href = "#"> 3 </a>
        </div>
    </li>
     <li>
        <div class="image"><img src="http://mi-soft.nl/images/SQUARE.png"/></div>
        <div class="overlay">
            <a href = "#"> 1 </a>
            <a href = "#"> 2 </a>
            <a href = "#"> 3 </a>
        </div>
    </li>
    
</ul>

CSS

.image{
     width:100px;
     height:100px;    
}
.overlay{
    width:100%;
    height:100%;
    display:none;
    position:absolute;
    top:0px;
    left:0px;
}

.overlay a{
   float:right;
   margin:5px;
}

ul { list-style: none; width: 100%; }
ul li { position:relative;display:inline-block; width:150px;height:150px;}
li:hover .overlay {
    display:block;
    background-color:#cecece;
    opacity:0.75;
}