JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<div class="frame">
    <img src="https://pp.vk.me/c630630/v630630305/24a07/pNzKe85JLPE.jpg" alt="" />
</div>

CSS

.frame {
    width: 400px;
    height: 200px; 
    overflow: hidden;
  }

JavaScript

var amount = '';
function scroll() {
    $('.frame').animate({
        scrollTop: amount
    }, 150, 'linear',function() {
        if (amount != '') {
            scroll();
        }
    });
}
$('.frame').hover(function() {
    amount = '+=25';
    scroll();
    //new code here
    if (amount = '200';) {
      amount = '-=25';
      scroll();
    }
}, function() {
    amount = '0';
});