JSFiddle - React, Tailwind, and code Playground

HTML

<div class="thumbnail-wrapper">
  <img src="http://lorempixel.com/100/800/food">
  </div>

CSS

.thumbnail-wrapper{
       width:190px;
       height:100px;
       overflow:hidden;
       position:absolute;
    }
    .thumbnail-wrapper img{
       position:relative;
       top:0;
    }

JavaScript

$(function(){
    var gifTimer;
    var currentGifId=null;
    var step = 100; //height of a thumbnail
    $('.thumbnail-wrapper img').hover(
       function(){
          currentGifId = $(this)
          gifTimer = setInterval(playGif,500);
       },
       function(){
           clearInterval(gifTimer);
           currentGifId=null;
       }
    );

    var playGif = function(){
       var top = parseInt(currentGifId.css('top'))-step;
       var max = currentGifId.height();
       console.log(top,max)
       if(max+top<=0){
         console.log('reset')
         top=0;
       }
       currentGifId.css('top',top);
    }
})