JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>
            <span>some text</span>
            <div class="hover">
                <div class="img">
                    <img src="http://placehold.it/50x50" class="i0">
                    <img src="http://placehold.it/50x50" class="i2">
                    <img src="http://placehold.it/50x50" class="i3">
                    <img src="http://placehold.it/50x50" class="i6">
                    <img src="http://placehold.it/50x50" class="i7">
                    <img src="http://placehold.it/50x50" class="i8">
                </div>
            </div>
        </td>
        <td class="otherimage">
            <span>some text</span>
            <div class="hover">
                <div class="img">
                    <img src="http://placehold.it/50x50" class="i0">
                    <img src="http://placehold.it/50x50" class="i1">
                    <img src="http://placehold.it/50x50" class="i3">
                    <img src="http://placehold.it/50x50" class="i4">
                    <img src="http://placehold.it/50x50" class="i6">
                    <img src="http://placehold.it/50x50" class="i8">
                </div>
            </div>
        </td>
        <td class="yetanotherimage">
            <span>some text</span>
            <div class="hover">
                <div class="img">
                    <img src="http://placehold.it/50x50" class="i0">
                    <img src="http://placehold.it/50x50" class="i1">
                    <img src="http://placehold.it/50x50" class="i2">
                    <img src="http://placehold.it/50x50" class="i5">
                    <img src="http://placehold.it/50x50" class="i8">
                </div>
            </div>
        </td>
        <td>
            <span>some text</span>
            <div class="hover">
                <div class="img">
                    <img src="http://placehold.it/50x50" class="i0">
                    <img src="http://placehold.it/50x50" class="i2">
  ...

CSS

table {
    width:900px;
}
td {
    background:url(http://placehold.it/300x300) 0 0;
    text-align:center;
    vertical-align:middle;
    position:relative;
    height:150px;
    width:150px;
    overflow:hidden;
}
td.otherimage {
    background-position: -50px -50px;
}
td.yetanotherimage {
    background-position: -100px -50px;
}
div.hover {
    height:150px;
    position:absolute;
    top:0px;
    width:150px;
}
div.hover:hover {
    cursor:pointer;
}
div.hover:hover .img {
    display:block;
}
.img {
    display:none;
}
.i0,.i1,.i2,.i3,.i4,.i5,.i6,.i7,.i8 {
    position:absolute;
}
.i0,.i1,.i2 {
    top:0px
}
.i3,.i4,.i5 {
    top:50px
}
.i6,.i7,.i8 {
    top:100px
}
.i0,.i3,.i6 {
    left:0px
}
.i1,.i4,.i7 {
    left:50px
}
.i2,.i5,.i8 {
    left:100px
}

JavaScript

$('img').click(function() {
    alert("wow!");
})