JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li>img
    <div>
        <span>put a desc here</span>
    </div>
</li>
<li>img
    <div>
        <span>put a desc here</span>
    </div>
</li>
<li>img
    <div>
        <span>put a desc here</span>
    </div>
</li>
</ul>

CSS

ul li {
     display:inline-block;
     margin-left:20px;
     opacity:1;
     border: 10px solid #fff;
     position: relative;
     -webkit-transition: opacity .25s ease-in-out;
     -moz-transition: opacity .25s ease-in-out;
     -ms-transition: opacity .25s ease-in-out;
     -o-transition: opacity .25s ease-in-out;
     transition: opacity .25s ease-in-out;
     -moz-box-shadow:    3px 3px 5px 6px #ccc;
     -webkit-box-shadow: 3px 3px 5px 6px #ccc;
     box-shadow:         3px 3px 5px 6px #ccc;
}
ul li, ul li div {
     height: 100px;
     width: 100px;
     background: #999;
     text-align: center;
     -moz-border-radius: 100px;
     -webkit-border-radius: 100px;
     border-radius: 100px;
}
  ul li div {
     position:absolute;
     background: #000;
     color: #fff;
     top:0;
     left:0;
     opacity: 0;

  }      
    ul li div:hover {
       opacity: 1;
       -webkit-transition: opacity .25s ease-in-out;
       -moz-transition: opacity .25s ease-in-out;
       -ms-transition: opacity .25s ease-in-out;
       -o-transition: opacity .25s ease-in-out;
       transition: opacity .25s ease-in-out;
    }
    ul li div span {
         position: relative;
         top: 30px;
    }