JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
       <img src="http://puu.sh/bBajS/71c9f3f0d7.jpg" alt="">
        <div class="inner-block">
            <span class="text">view 123</span>
        </div>
    </li>
        <li>
       <img src="http://puu.sh/bBajS/71c9f3f0d7.jpg" alt="">
        <div class="inner-block">
            <span class="text">view 123</span>
        </div>
    </li>
    <li>
         <img src="http://puu.sh/bBajS/71c9f3f0d7.jpg" alt="">
        <div class="inner-block">
            <span class="text">view 123</span>
        </div>      
    </li>
          <li>
         <img src="http://puu.sh/bBajS/71c9f3f0d7.jpg" alt="">
        <div class="inner-block">
            <span class="text">view 123</span>
        </div>      
    </li>
                <li>
         <img src="http://puu.sh/bBajS/71c9f3f0d7.jpg" alt="">
        <div class="inner-block">
            <span class="text">view 123</span>
        </div>      
    </li>
                      <li>
         <img src="http://puu.sh/bBajS/71c9f3f0d7.jpg" alt="">
        <div class="inner-block">
            <span class="text">view 123</span>
        </div>      
    </li>
                          
</ul>

CSS

ul{
    list-style:none;
    width: 300px;
}

li{
    height:100px;
    width:100px;
    position: relative;
    float:left;
}

li img{
    height:100px;
    width:100px;
}

.inner-block{
    position: absolute;
    left:0;
    top:0;
    width: 100px;
    text-align:center;    
    line-height:100px;
    opacity:0;
    background: rgba(0,0,0, .4);
    transition: all 0.5s ease;
}

.text{
color:white;
}

li:hover .inner-block{
    opacity:1;
    transition: all 0.5s ease;
}