JSFiddle - React, Tailwind, and code Playground

HTML

<div id="foo">
    <div id="onMouseIn" class="one" style="display:none;">
        <img src="inPicture"/>Hello
    </div>
    <div id="onMouseOut" class="two">
        <img src="outPicture"/>Bello
    </div>   
</div>

CSS

.one{
border:2px solid blue;
}
.two{
border:2px solid red;
}

JavaScript

$(document).ready(function(){
    $('#foo').hover(function(e){
        //This is onMouseIn event
        $('#onMouseIn').slideDown(600);
        $('#onMouseOut').slideUp(600);
    }, 
    function(e){
        //This is onMouseOut event
        $('#onMouseOut').slideDown(600);
        $('#onMouseIn').slideUp(600);
    });
});