JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<img class="hidden image1" src="https://placeholder.pics/svg/300x300/DEDEDE/555555/New%20Image">
    
    <img class="image2" src="https://placeholder.pics/svg/300x300/DEDEDE/555555/Old%20Image" />
    </div>
     <div id="hoverMe">hover me</div>

CSS

div#hoverMe{
    background-color:yellow;
    width:50px;
    height:50px;
    position:fixed;
    top:300px;
}

div#container{
   position:relative;
    height:200px;
}

.hidden{
 opacity:0;   
}

img{
    position:absolute;
    opacity:1;
    transition:opacity 0.5s linear;
}

JavaScript

$(function(){
    $(document).on('mouseenter', '#hoverMe', function(){
        $('img').toggleClass('hidden');
    });
});