JSFiddle - React, Tailwind, and code Playground

HTML

<div id='overlay'></div>

CSS

#overlay {
    width: 200px;
    height: 200px;
    background: orange;
    position: relative;
    top: 123px;
    left:23px;
}

JavaScript

var $ovl = $('#overlay');
var offset = $ovl.offset();
var height = $ovl.height();
var width = $ovl.width();

var bounds = {top: offset.top - 100,
              bottom: offset.top + height + 100,
              left: offset.left - 100,
              right: offset.left + width + 100
             }
    
$ovl.mouseenter(function() {
    $ovl.stop().animate({opacity:1});
});
    
    $(document).mousemove(function(e) {
    if(e.pageX < bounds.left ||
       e.pageX > bounds.right ||
       e.pageY < bounds.top ||
       e.pageY > bounds.bottom) {
           $ovl.stop().animate({opacity:.3});
    }
});