JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<ul id="nav">
    <li>
        <a href="#">Home</a>
        <img src="x.jpg" class="navbutton" />
    </li>

    <li>
        <a href="#">Contact</a>
        <img src="x.jpg" class="navbutton" />
    </li>
</ul>

CSS

#nav { margin:0px; padding: 5px; list-style-type:none; background-color:red; height: 115px; }
#nav li { margin:0px 5px; float:left; width: 120px; height: 115px; border:1px solid black; position:relative; }
#nav li a { line-height: 100px; text-align:center; z-index:10; position:absolute; width:100%; height:100%; }
#nav .navbutton { background-color:green;z-index:1; position:absolute; width: 120px; height: 115px; }

JavaScript

$('#nav li a').hover(
    function() {
        $(this).next('img').fadeOut(700);
    },
    function() {
        $(this).next('img').fadeIn(700);
    }
);