JSFiddle - React, Tailwind, and code Playground

by Ying Chor Ding

HTML

<div>
    <ul class="images">
        <li><span>a</span></li>
        <li><span>b</span></li>
        <li><span>c</span></li>
        <li><span>d</span></li>
    </ul>
</div>

CSS

div
{
    width: 100%;
    height: 250px;
    background-color:blueviolet;
}

ul
{
    list-style:none;
}

li
{
    background-color:#CCC;
    width: 100px;
    float:left;
    padding-left:1px
}

li{width:150px; height:100px; position:relative}
li span{width:150px; height:100px; position:absolute; top:0; left:0; display:block; background-color:blue}
li:hover span{width:200px; height:150px; top:-25px; left:-25px}