JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.mainmenu ul li{
    height: 86px;
    display: inline-block;
    margin: 0;
    padding: 0;
    position: relative;
}

.mainmenu ul li a {
    z-index: 1;
    position: relative;
}

.mainmenu ul li div {
        position: absolute;
        top: 0; bottom: 0; left: 0; right: 0;
        z-index: 0;
        background: url(http://placekitten.com/g/100/100) no-repeat center bottom;
        opacity: 0;        
       -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 ul li:hover div {
    opacity: 1.0;
}