JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Non-animation</h3>
Mouse over to change image once, mouse out does nothing.
<div class="graphic fadehover last">
 <img src="http://i42.tinypic.com/4v0duw.jpg" alt="" class="b" />
 <img src="http://i39.tinypic.com/vdwmu.jpg" alt="" class="a" />
</div>

<br><br>

<h3>Animation block</h3>
Mouse over to start cycling through each image, mouse out to stop.
<div class="animation fadehover">
 <img src="http://i42.tinypic.com/10holmp.jpg" alt="sun rising" class=""/>
 <img src="http://i44.tinypic.com/xdgl54.jpg" alt="sun rising" class=""/>
 <img src="http://i39.tinypic.com/2my1auc.jpg" alt="sun rising" class=""/>
</div>

CSS

.fadehover { border: #555 1px solid; margin: 20px 45px; position:relative; width: 170px; height: 170px; z-index: 100; }
img { position: absolute; left: 10px; top: 10px; z-index: 10; width: 150px; height: 150px; }

JavaScript

$(document).ready(function(){

 // make first image in each block the current image & hide the rest
 $(".fadehover").each(function(){
  $(this).find("img:first").addClass("current");
  $(this).find("img:not(:first)").hide();
 });

 // display next image
 var timer,
  nextImg = function(el) {
   // fadeout current image
   var curImg = el.find('img.current')
    .removeClass('current')
    .stop(true, true).fadeOut('slow');
   // find next image; if no next image exist, reset to the first one
   curImg = (curImg.next().length) ? curImg.next() :  curImg.parent().find('img:first');
   // fadein current (next) image
   curImg
    .addClass('current')
    .fadeIn('slow');
  };

 // cycle through each image on hover
 $(".fadehover").hover(function(){
   var el = $(this);

   // if the fadehover has the animation class, then cycle through the images while hovering
   if (el.is('.animation')) {
    timer = setInterval(function(){ nextImg(el); }, 1500);
   }
   // no animation, just show the next image on hover
   nextImg(el);

  }, function(){
   var el = $(this);

   // on mouseout, stop animation, or do nothing
   if (el.is('.animation')) {
    clearInterval(timer);
   }
   // fadeIn, just in case the clearInterval breaks the animation
   el.find('.current').stop(true, true).fadeIn('slow');

  });

});