JSFiddle - React, Tailwind, and code Playground

HTML

<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')
   // find next image; if no next image exist, add "done" class
   if (curImg.next().length) {
    // fadein current (next) image
    curImg
     .removeClass('current')
     .stop(true, true).fadeOut('slow')
     .next()
     .addClass('current')
     .fadeIn('slow');
   } else {
    el.addClass('done');
   }

  };

 // cycle through each image on hover
 $(".fadehover").hover(function(){
   var el = $(this);
   // if the element has the "done" class, then stop
   if (!el.is('done')) {
    timer = setInterval(function(){ nextImg(el); }, 2000);
   }
  }, function(){
   var el = $(this);
   if (el.is('done')) { return; }
   // on mouseout, stop animation
   clearInterval(timer);
   // fadeIn, just in case the clearInterval breaks the animation
   el.find('.current').stop(true, true).fadeIn('slow');
  });

});