JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer"></div>5859

CSS

body {
    padding: 0;
}

#outer {
    margin: 60px auto;
    width: 400px;
    height: 300px;
    overflow: hidden;
    background: url('http://lh6.ggpht.com/_fxkujw2mA9U/TAhwYa3EGlI/AAAAAAAAAIo/Wi7XY2Bxgrc/s1600-e365/05_natgeo_10.jpg') center;
}

JavaScript

var img = $('#outer'), 
    imgWidth = 1600, 
    imgHeight = 1200, 
    eleWidth = img.width(), 
    eleHeight = img.height(), 
    offsetX = img.offset().left, 
    offsetY = img.offset().top, 
    moveRatioX = imgWidth / eleWidth - 1, 
    moveRatioY = imgHeight / eleHeight - 1;
    

img.mousemove(function(e){
    var x = imgWidth - ((e.pageX - offsetX) * moveRatioX), 
        y = imgHeight - ((e.pageY - offsetY) * moveRatioY);
    this.style.backgroundPosition =  x + 'px ' + y + 'px';
});