JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<table style="width:200px; margin-left:auto; margin-right:auto;" cellpadding="5">
<tr style="height:60px;">
<td><img src="https://orig00.deviantart.net/35dd/f/2017/210/a/c/avacynicon2_by_bronzehalo-dbi4ac0.gif"><span class="icon">Commission for <a href="fillyrox.deviantart.com">fillyrox</a>, their character <a href="--">Avacyn</a></span></td>
<td><img src="http://orig13.deviantart.net/eaa2/f/2017/210/1/7/razielicon2_by_bronzehalo-dbi4a2w.gif"><span class="icon">Commission for fillyrox, their character Raziel</span></td>
<td><img src="http://orig06.deviantart.net/5e74/f/2017/210/3/b/zadkielicon2_by_bronzehalo-dbi48u9.gif"><span class="icon">Commission for fillyrox, their character Zadkiel</span>
</td>
</tr>
<tr style="height:60px;">
<td><img src="http://orig02.deviantart.net/c8c0/f/2017/210/4/d/avacynicon2_by_bronzehalo-dbi4ari.gif"><span class="icon">Description,<br>icon for...</span></td>
<td><img src="http://orig12.deviantart.net/0266/f/2017/210/b/3/razielicon2_by_bronzehalo-dbi47x2.gif"><span class="icon">Description 5</span></td>
<td><img src="http://orig07.deviantart.net/14ae/f/2017/210/e/0/zadkielicon2_by_bronzehalo-dbi49la.gif"><span class="icon">Description goes in this box...</span>
</td>
</tr>
</table><p>.<p>
<table class="thumb" style="width: 400px; margin-left: auto; margin-right: auto;" cellpadding="5px 5px 5px 5px" >
<tbody>
<tr style="height: 160px;">
<td style="border:0px;"><img src="http://orig01.deviantart.net/3d0c/f/2017/193/9/9/harlepix_2_by_bronzehalo-dbg2wmw.png" alt="hhh"><span class="big">Commission...</span></td>
<td style="border:0px;"><img src="http://orig01.deviantart.net/3d0c/f/2017/193/9/9/harlepix_2_by_bronzehalo-dbg2wmw.png" alt="hhh"><span class="big">Commission...</span></td>
<td style="border:0px;"><img src="http://orig01.deviantart.net/3d0c/f/2017/193/9/9/harlepix_2_by_bronzehalo-dbg2wmw.png" alt="hhh"><span class="big">Commission...</span></td>
</tr>

CSS

span.icon {
    background:#fff;
    border: 1px solid #ccc;
    color: #6e6e6e;
    font-size: 13px;
    height: 50px;
    width: 100px;
    line-height: 15px;
    position: absolute;
    text-align: left;
    top:48px;
    left:-25px;
    display:none;
    padding:5px;
    z-index:10;
}

span.big {
    background:#fff;
    border: 1px solid #ccc;
    color: #6e6e6e;
    font-size: 13px;
    height: 60px;
    width: 100px;
    line-height: 15px;
    position: absolute;
    text-align: left;
    top:140px;
    left:20px;
    display:none;
    padding:5px;
    z-index:10;
}

td { position:relative; }

td:hover span{
    display:inline-block;
    position: absolute;
}