JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <title>Sample document</title>
    </head>
    <body>
        <ul id="navbar">
            <li>
                <a href="#">
                    <img alt="" src="http://www.kallemagnusson.com/00covers/keane.jpg" />
                    <img class="on-hover" alt="" src="http://0.tqn.com/d/randb/1/0/y/F/-/-/AshantiDeclaration.jpg" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img alt="" src="http://quimby.gnus.org/4ad-pics/TheBirthdayParty.Junkyard.lp.jpg"/>
                    <img class="on-hover" alt="" src="http://www.stevecarter.com/worstalbumcovers02.jpg"/>
                </a>
            </li>
            <li>
                <a href="#">
                    <img alt="" src="http://www.thetoyzone.com/wp-content/uploads/2008/07/abbey-road-beatles.jpg"  />
                    <img class="on-hover" alt="" src="http://www.brandflakesforbreakfast.com/uploaded_images/joyce-album-cover-710581.jpg"/>
                </a>
            </li>
        </ul>
    </body>
</html>

CSS

#navbar
{
    overflow: hidden;
}

#navbar li
{
    float: left;
    margin-right: 30px;
}

#navbar a
{
    position: relative;
    width: 100px;
    height: 100px;
    display: block;
}

#navbar img
{
    width: 100px;
    height: 100px;
    z-index: 15;
    position: absolute;
    top: 0;
    left: 0;
}

#navbar img.on-hover
{
    z-index: 10;
}

#navbar a:hover img.on-hover
{
    z-index: 20;
}