JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

<div class="film-box-arr">
        	<span class="arr-up" intvr=""><a href="#"><img alt="" src="http://athinakaramalis.com/wp-content/themes/athina-them/images/arr-up.jpg"></a></span>
			<span class="arr-dwn" intvr=""><a href="#"><img alt="" src="http://athinakaramalis.com/wp-content/themes/athina-them/images/arr-dwn.jpg"></a></span>
        </div>
                

                <div class="film-box col-sm-4 ovrimg gmk1071">
        <a href="http://athinakaramalis.com/contet/">
          	            </a>
            <p>as an extension of marketing and developing the advanced image of the brand, i was involved in producing an overseeing the direction of a series of films.  The idea was to create curiosity and engage the audience with a subtle and gradual introduction through moments of emotional encounters. the focus was to remain relatable, and adapting a natural process of evolvement through feeling, as the collection itself was expanding its presence and following. the brands growth and evolvement was depicted through a series of expressions of youth, exploration, curiosity, mystery, confidence, and femininity. it was essential to adapt a natural progression of the brands core aesthetic, in each stage of re-branding.</p>
			          </div>

CSS

.gmk1071 {
    border: 1px solid #eee;
    height: 104px;
    overflow: hidden;
    padding: 10px;
}

span:hover{
    background-color:yellow;    
}

JavaScript

//SCROLLING CODE

var amount = '';
function scroll() {
    jQuery('.gmk1071').animate({
        scrollTop: amount
    }, 100, 'linear',function() {
        if (amount != '') {
            scroll();
        }
    });
}

jQuery('.arr-up').hover(function() {
    amount = '-=10';
    scroll();
}, function() {
    amount = '';
});

jQuery('.arr-dwn').hover(function() {
    amount = '+=10';
    scroll();
}, function() {
    amount = '';
});





//SCROLLING CODE
$('.film-box-arr span').on("touchstart", function (e) {
    "use strict"; //satisfy the code inspectors
    var link = $(this); //preselect the link
    if (link.hasClass('hover')) {
        
        return true;
    } else {
        link.addClass("hover");
        $('.film-box-arr span').not(this).removeClass("hover");
        e.preventDefault();
        return false; //extra, and to make sure the function has consistent return points
    }
});