JSFiddle - React, Tailwind, and code Playground

HTML

<div class='scroll'>
    <div class='scroll-content'>
        <img class="zoomable zoomed-out" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2"></img> 
        <img class="zoomable zoomed-out" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2"></img> 
        <img class="zoomable zoomed-out" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2"></img> 
        <img class="zoomable zoomed-out" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2"></img> 
        <img class="zoomable zoomed-out" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2"></img>
        <img class="zoomable zoomed-out" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2"></img>
        <img class="zoomable zoomed-out" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2"></img>
        <img class="zoomable zoomed-out" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2"></img>
    </div>
</div>
<div id="zoom"></div>

CSS

div.scroll { margin-top: 200px;
    margin-left: 100px;
    white-space:no-wrap;
    overflow:hidden;
    visible: hidden;
}

div.scroll > div.scroll-content {
    white-space:nowrap;
    display:inline;
    margin-top: 20px;
    margin-left: 50 px;
    width:auto;
}

#zoom { 
    position: absolute;
        top: 150px;
        left: 150px;
    height: 200px;
    width: 200px;
    border: solid; color:red;
    border-width: 3px;
    border-radius: 155px;
    background: #DDD;
    opacity: .3;
}

.zoomable {
    -webkit-transition: 1s all;
}

.zoomed-in {
    -webkit-transform: scale(1.3);
}


div.clone {
    white-space:nowrap;
    display:inline;
    margin-top: 20px;
    margin-left: 50 px;
    width:auto;
}

JavaScript

// this scrolls original divs

$(function scoll(){
    var scroll = $('div.scroll');
    scroll.each(function() {
        var mar = $(this),indent = mar.width();
        mar.scroll = function() {
            indent--;
            mar.css('text-indent',indent);
            if (indent < -1 * mar.children('div.scroll-content').width()) {
                indent = mar.width();
            }
            
            var zoom = document.getElementById("zoom");
            var elements = $('.zoomed-out');
            
            $.each(elements, function(){
                if (this.getClientRects()[0].left > zoom.getClientRects()[0].left + 20 &&
                    this.getClientRects()[0].right < zoom.getClientRects()[0].right + 50) {
                    $(this).addClass('zoomed-in');
                } else {
                    $(this).removeClass('zoomed-in');
                }
            });
            
        };
        mar.data('interval',setInterval(mar.scroll,1/60));
    });
});