JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu" id="menu">
    <li>
        <a href="#"></a>
        <div class="sc_menu_wrapper">
            <div class="sc_menu">
                <a href="#"><img src="http://farm2.static.flickr.com/1434/1464732409_f28c3261c7.jpg" alt=""/></a>
                <a href="#"><img src="http://farm2.static.flickr.com/1059/1464786371_1c5f2a4c6d.jpg" alt=""/></a>
                <a href="#"><img src="http://farm2.static.flickr.com/1055/1464889255_fa7801615c.jpg" alt=""/></a>
                <a href="#"><img src="http://farm2.static.flickr.com/1370/1464993617_f0fe04be17.jpg" alt=""/></a>
            </div>
        </div>
    </li>
    </ul>

CSS

/* Navigation Style */
ul.menu{
position: fixed;
top: 0px; 
left:0px;
width: 100%;
}

ul.menu li{
position:relative;
width: 100% 
}

ul.menu li > a{
position:absolute;
top:300px;
left:0px;
width:40px;
height:200px;
background-color:#e7e7e8;
}

/* Thumb Scrolling Style */

div.sc_menu_wrapper {
position: absolute;
right: 0px; 
height: 220px;
overflow: hidden;
top: 300px; 
left:0px;
visibility:hidden;
}

div.sc_menu {
height: 200px; 
visibility:hidden;
}

.sc_menu a {
display: block;
background-color:#e7e7e8;
}
.sc_menu img {
 height: 195px;
 width: 130px;
 display: block;
 border: none;
 float: left;
 opacity:0.3;
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
}

JavaScript

$(function () {

    // function to make the thumbs menu scrollable


    function buildThumbs($elem) {
        var $wrapper = $elem.next();
        var $menu = $wrapper.find('.sc_menu');
        var inactiveMargin = 220;

        // move the scroll down to the beggining (move as much as the height of the menu)
        $wrapper.scrollLeft($menu.outerWidth());

        //when moving the mouse up or down, the wrapper moves (scrolls) up or down
        $wrapper.bind('mousemove', function (e) {

            var wrapperWidth = $wrapper.width();
            var menuWidth = $menu.outerWidth() + 2 * inactiveMargin;
            var left = (e.pageX - $wrapper.offset().left) * (menuWidth - wrapperWidth) / wrapperWidth - inactiveMargin;

            $wrapper.scrollLeft(left + 10);
        });
    }

    var stacktime;

    $('#menu li > a').bind('mouseover', function () {
        var $this = $(this);

        buildThumbs($this);

        var pos = $this.next().find('a').size();
        var f = function () {
            if (pos == 0) clearTimeout(stacktime);
            $this.next().find('a:nth-child(' + pos + ')').css('visibility', 'visible');
            --pos;
        };

        // each thumb will appear with a delay
        stacktime = setInterval(f, 50);
    });


    /// on mouseleave of the whole <li> the scrollable area is hidden
    $('#menu li').bind('mouseleave', function () {
        var $this = $(this);
        clearTimeout(stacktime);
        $this.find('.sc_menu').css('visibility', 'hidden').find('a').css('visibility', 'hidden');
        $this.find('.sc_menu_wrapper').css('visibility', 'hidden');
    });

    // when hovering a thumb, change its opacity
    $('.sc_menu a').hover(

    function () {
        var $this = $(this);
        $this.find('img').stop().animate({
            'opacity': '1.0'
        }, 400);
    }, function () {
        var $this = $(this);
        $this.find('img').stop().animate({
            'opacity': '0.3'
        }, 400);
    });
});