JSFiddle - React, Tailwind, and code Playground

by Blake Plumb

HTML

<span class="image_hover">
<img src="http://placehold.it/350x150/"/>
<img class="secondary" src="http://placehold.it/450x150/"/>
</span>

CSS

.secondary{
    display: none;
}

JavaScript

$("span.image_hover").hover(function() {
      var spanImageHover = $(this);
       spanImageHover.find("img:not(.secondary):visible").stop(true, true).fadeOut(function(){
             spanImageHover.find("img.secondary").stop(true, true).fadeIn();
        });
      }, function() {
          var spanImageHover = $(this);
          spanImageHover.find("img.secondary:visible").stop(true, true).fadeOut(function(){
             spanImageHover.find("img:not(.secondary)").stop(true, true).fadeIn();
          });
      });