JSFiddle - React, Tailwind, and code Playground

HTML

<div id="log">
</div>

<div class="view">
    <div class="content">
    ASDffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
    </div>
</div>

CSS

html, body {
    background: #333;
    margin: 0;
    padding: 0;
}

img {
    border: 1px solid white;
    display: block;
    float: left;
    height: 100px;
    width: 100px;
}

.view {
    overflow: hidden;
    position: relative;
}

.content {
    position: relative;
    overflow: hidden;
}

#log {
    background: white;
    border-radius: 0 0 2px 0;
    color: #333;
    font-family: sans-serif;
    padding: 5px;
    position: fixed;
    top: 0;
    left: 0;
}

JavaScript

var $win = $(window);
var $log = $('#log');
var $view = $('.view');
var $content = $view.find('.content');
var images = 100;
var width = (images / 4) * 102;

$content.width(width);

$view.css({
    'margin-top': $win.height() / 4,
    height: $win.height() / 2
    
});

for (var i = 0; i < 100; i += 1) {
    var $image = $('<image>', {
        src: 'http://placekitten.com/100/100/'
    });
    
    $image.appendTo($content);
}

$view.on('mousemove', function (event) {
    var $this = $(this);
    var parentOffset = $this.parent().offset();
    var mouseX = event.pageX - parentOffset.left;
    var mouseY = event.pageY - parentOffset.top;
    
    $log.text(mouseX + ', ' + mouseY);
    
    var viewRangeX = $this.width();
    var viewRangeY = $this.height();
    
    var contentRangeX = $content.outerWidth(true);
    var contentRangeY = $content.outerHeight(true);
    
    var ratioX = contentRangeX / viewRangeX;
    var ratioY = contentRangeY / viewRangeY;
    
    var differenceX = contentRangeX - viewRangeX;
    var differenceY = contentRangeY - viewRangeY;
    
    var offsetX = (mouseX * ratioX) - mouseX;
    var offsetY = (mouseY * ratioY) - mouseY;
    
    $content.css({
        top: (offsetY * -1) + 'px',
        left: (offsetX * -1) + 'px'
    });
    
});