JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"></div>

CSS

#container {
    width: 600px;
    height: 400px;
    background: url('http://turnado.net/i/cover/sevastopol.jpg') no-repeat center;
    transition:background-position .5s ease-out;
}

JavaScript

var container = document.querySelector('#container'),
    width = container.clientWidth,
    height = container.clientHeight,
    maxWidth = 1920,
    maxHeight = 586,
    timeout = null,
    x, y;

container.addEventListener('mousemove', function(e) {
    x = -e.offsetX * (maxWidth - width) / width;
    y = -e.offsetY * (maxHeight - height) / height;
    if (timeout) return;
    timeout = setTimeout(function() {
        container.style.backgroundPosition = x + 'px ' + y + 'px';
        timeout = null;
    }, 100);
}, false);