JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider" style="position:relative;">
    <ul>
        <li><img src="http://placehold.it/200x200/A52A2A/"/></li>
        <li><img src="http://placehold.it/200x200/9ACD32"/></li>
    </ul>
</div>

CSS

#slider {
    position:relative;
    width: 200px;
    height: 200px;
}
#slider ul {
    list-style: none;
}
#slider ul li img {
    position: absolute; 
    left:0; 
    top:0;
}

JavaScript

$("#slider img:eq(1)").hide();
$("#slider").hover(
    function() { $(this).find("img").animate({ opacity: "toggle" }, "slow"); },
    function() { $(this).find("img").animate({ opacity: "toggle" }, "slow"); }
);