JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav_bar">  hover me
    <div id="nav_image">  
        <img src="navimage.jpg" />  
    </div>  
</div>

CSS

img {
    width: 100px;
    height: 100px;
    background: orange;
}

JavaScript

$("#nav_bar").mouseenter(showNav).mouseleave(hideNav);

function showNav(){  
    $("#nav_image").stop().animate({opacity:1},250); }

function hideNav(){  
    $("#nav_image").stop().animate({opacity:0},2500); }