JSFiddle - React, Tailwind, and code Playground
HTML
<div class='scroll'>
<div class='scroll-content'>
<img src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2"></img>
<img src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2"></img>
Text sample 1
<img src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2"></img>
<img src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2"></img>
<img src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2"></img>
Text sample 2
<img src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2"></img>
Text sample 3
</div>
</div>
<div id="zoom"></div>
CSS
div.scroll { margin-top: 200px;
margin-left: 100px;
white-space:no-wrap;
overflow: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;
}
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();
}
};
mar.data('interval',setInterval(mar.scroll,1/60));
});
});
/* this should clone original divs with css transformation
$(function clone(){
var val = 2;
$('.scroll-content').clone().addClass('clone').css({
'-moz-transform': 'scale(' + val + ')',
'-webkit-transform': 'scale(' + val + ')'}).appendTo('#zoom', scroll2);
$('.clone').remove();
});
*/
/* this should scroll clones inside red circle
$(function scoll2(){
var scroll = $('div#zoom');
scroll.each(function() {
var mar = $(this),indent = mar.width();
mar.scroll = function() {
indent--;
mar.css('text-indent',indent);
if (indent < -1 * mar.children('div.clone').width()) {
indent = mar.width();
}
};
mar.data('interval',setInterval(mar.scroll,1/60));
});
});
*/