JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
    <div class="spotlight"></div>
</div>

CSS

.content {
    position: relative;
    width: 640px;
    height: 480px;
    background: url(http://www.forestpath.org/test/misc/img/photos/photo003-640-480-desaturated.jpg) no-repeat 0 0;
    overflow: hidden;
}
.spotlight {
    display: none;
    position: absolute;
    background: url(http://www.forestpath.org/test/misc/img/photos/photo003-640-480-overly-saturated.jpg) no-repeat 0 0;
}

JavaScript

// Global variables
var spotlightDiameter = 150;


// Verify that the mouse event wasn't triggered by a descendant.
function verifyMouseEvent(e, elem) {
    e = e || window.event;
    var related = e.relatedTarget || e.toElement;

    while ((related != undefined) &&
           (related != elem) &&
           (related.nodeName != 'BODY'))
    {
        related = related.parentNode;
    }
    return (related != elem);
}


// Create the spotlight
function createSpotlight() {
    $('.spotlight').width(spotlightDiameter + 'px')
                   .height(spotlightDiameter + 'px')
                   .css({borderRadius: (spotlightDiameter >> 1) + 'px'});
}


// Mousemove
$('.content').on('mousemove', function(e){
    var center = {x: e.pageX - this.offsetLeft,
                  y: e.pageY - this.offsetTop};
    var x = center.x - (spotlightDiameter >> 1);
    var y = center.y - (spotlightDiameter >> 1);

    $('.spotlight').css({left: x + 'px', top: y + 'px',
                          backgroundPosition: -x + 'px ' + -y + 'px'}).show();
});


// Mouseover
$('.content').on('mouseout', function(e){
    if (!verifyMouseEvent(e, this)) return;
    $('.spotlight').hide();
});


$(document).ready(function(){
    createSpotlight();
});