JSFiddle - React, Tailwind, and code Playground

by Tiago Antonio Jacobi

HTML

<ul class="image-switch">
  <li><a href="1.htm" data-image="1.png">111</a>
  <li><a href="2.htm" data-image="2.png">222</a>
  <li><a href="3.htm" data-image="3.png">333</a>
</ul>

<img class="image-container" src="1.png" name="poster">

JavaScript

$(document).ready(function() {
  $('ul.image-switch li').mouseover(function() {
    var image_src = $(this).data('image');
    var img = $('img.image-container');
    if (img.attr('src') != image_src) { // only do the fade if other image is selected
        img.fadeOut('slow', function() { // fadeout the current image
        img.attr('src', img.attr('src')).fadeIn(); // load and fadein new image
      });
    }
  });
});