JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><img src="http://events.germany.travel/assetimage_4538_300sc200.jpg"  />
        <div>
            <span>put a desc here</span>
        </div>
    </li>
    <li><img src="http://events.germany.travel/assetimage_4538_300sc200.jpg"  />
        <div>
            <span>put a desc here</span>
        </div>
    </li>
    <li><img src="http://events.germany.travel/assetimage_4538_300sc200.jpg"  />
        <div>
            <span>put a desc here</span>
        </div>
    </li>
</ul>

CSS

ul li {
    display:inline-block;
    margin-left:20px;
    border: 10px solid #fff;
    position: relative;
    -moz-box-shadow:    3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow:         3px 3px 5px 6px #ccc;
    }
    li img{
    height: 80px;
    width: 80px;  
    }
    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;
    display: none;
          }      
  
        ul li div span {
        position: relative;
        top: 30px;
        }

JavaScript

$('ul li').hover(function() {
    $(this).find('div').fadeIn();
    }, function() {
    $(this).find('div').fadeOut();
    });