JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <ul id="list-1">
        <li class="active"></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
    </ul>
</div>

<div class="container">
    <ul id="list-2">
        <li><a class="active" href="#"></a></li>
        <li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li>
        <li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li>
        <li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li>
        <li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li>
        <li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li>
        <li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li>
    </ul>
</div>

CSS

.container { position: relative; overflow: hidden; width: 140px; height: 460px; float: left; margin-right: 100px; background: silver;  }        

ul { position: absolute; top: 10; list-style: none; margin: 10px; padding: 0; }
li { margin-bottom: 10px; width: 120px; height: 80px; background: gray; }

#list-1 li.hover { background: orange; }
#list-1 li.active { background: purple; }

#list-2 li a { display: block; width: 120px; height: 80px; outline: none; }
#list-2 li a:hover { background: teal; }
#list-2 li a.active { background: navy; }

JavaScript

// list 1
var idx = 0;
$('#list-1 li').hover(function() {
    $(this).addClass('hover');
}, function() {
    $(this).removeClass('hover');
}).click(function() {
    $('#list-1 > li').removeClass('active');
    var $active = $(this);
    $active.addClass('active');
    var id = $('#list-1 li.active').data('index') - 2; // take scroll param and subtract 2 to keep selected image in the middle

    var moveAmount = 90;
    idy = Math.max(0, id * moveAmount);
    var oldPos = $active.parent().position().top;

    $active.parent().animate({
        'top': -idy + 'px'
    }, function(){
alert('callback');
        var newPos = $(this).position().top;

        // Check if we moved
        if(oldPos - newPos != 0)
        {
            var movement = (oldPos - newPos) / moveAmount;
            alert(movement +" - " + $active.index());
            
            $($(this).children()[$active.index() + movement])
                .trigger("mouseover");

        }

    });
    return false;
}).css('cursor', 'pointer').each(function() {
    $(this).data('index', idx);
    ++idx;
});


// list 2
var idx_2 = 0;
$('#list-2 li a').click(function() {
    $('#list-2 > li a').removeClass('active');
    $(this).addClass('active');
    var id = $('#list-2 li a.active').data('index') - 2;
    idy = Math.max(0, id * 90);
    $(this).parent().parent().animate({
        'top': -idy + 'px'
    });
    return false;
}).each(function() {
    $(this).data('index', idx_2);
    ++idx_2;
});