JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<img class="hidden image1" src="http://www.istockphoto.com/file_thumbview_approve/4629609/2/istockphoto_4629609-green-field.jpg">
    
    <img class="image2" src="http://www.istockphoto.com/file_thumbview_approve/9958532/2/istockphoto_9958532-sun-and-clouds.jpg" />
    </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');
    });
});