JSFiddle - React, Tailwind, and code Playground

by robx

HTML

<ul>
    <li>
        <div class="picture">
            <img class="popup"src="http://i180.photobucket.com/albums/x155/IceeChica/ichigo-2.png" />
            <div class="popMe">Ichigo</div>
        </div>
    </li>
    <li>
        <div class="picture">
            <img class="popup" src="http://i180.photobucket.com/albums/x155/IceeChica/ichigo-2.png" />
            <div class="popMe">Ichigo2</div>
        </div>
    </li>
</ul>

CSS

.picture{
    display:inline-block;
    border:2px inset red;
    float:left;
}
.popup{
    width:120px;
    height:220px;
}
.popMe{
    visibility:hidden;
    width:100%;
}
.picture:hover div.popMe{
    color:#fff;
    background-color:rgba(0,0,0,0.8);
    visibility:visible;
    text-align:center;  
}