JSFiddle - React, Tailwind, and code Playground

HTML

<div id="x-ray"></div>

CSS

body {
    background: url(http://parallel.ua/f/1/white_grl.jpg) 0 0 no-repeat;
    min-width: 750px;
    min-height: 760px;
}
#x-ray {
    background: url(http://parallel.ua/f/1/black_grl.jpg) 0 0 no-repeat;
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 80px;
}

JavaScript

document.onmousemove = function(evt) {
    var e = evt || window.event, div = document.getElementById('x-ray');
    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft, scrollY = document.documentElement.scrollTop || document.body.scrollTop
    var x = e.clientX + scrollX - 80, y = e.clientY + scrollY - 80;
    div.style.left = x + 'px';
    div.style.top = y + 'px';
    div.style.backgroundPosition = '' + -x + 'px ' + -y + 'px';
}