JSFiddle - React, Tailwind, and code Playground

by cherryflavourpez

HTML

<div class="mainmenu">
    <ul>
        <li><a href=''>Home</a></li>
        <li><a href=''>About Us</a></li>
        <li><a href=''>Contact Us</a></li>
        <li><a href=''>Blog</a></li>
        <li><a href=''>Gallery</a></li>
    </ul>
</div>

CSS

.mainmenu li {
    position: relative;
    display: inline-block;
    height: 86px;
    margin: 0;
    padding: 0;
    background: url(http://placekitten.com/g/100/100) no-repeat center bottom;
}

.mainmenu li a {
    position: relative;
    display: block;
    height: 100%;
    background: #fff;
    -webkit-transition: all 1.5s ease-in-out;
    -moz-transition: all 1.5s ease-in-out;
    -ms-transition: all 1.5s ease-in-out;
    -o-transition: all 1.5s ease-in-out;
    transition: all 1.5s ease-in-out;
}

.mainmenu li a:hover {
    background: transparent;
}