JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pos">0 0</div> 
<div id="container">
     <img src="http://cdn.spiegel.de/images/image-285782-panoV9-hkoq.jpg" />
    <img src="http://cdn.spiegel.de/images/image-285747-panoV9-amrf.jpg" />     
    <span></span>
</div>

CSS

#container { position:relative;  width:100px; height:100px; }
#container img, #container span { position:absolute; }
#container span { width:800px; height:600px; top:30px; left:-800px; background:url('http://testlauf.tonwerte.net/wordpress/wp-content/uploads/2014/10/black.png') -50% 50%; opacity:.99; }

JavaScript

$('#container').bind(
    'mouseover, mousemove',
    function (e) {
        $('#pos').html(e.pageX +  ' ' +  e.pageY);
        $('#container span').css({left: e.pageX-400, top: e.pageY-300}); 
    }
);