JSFiddle - React, Tailwind, and code Playground

by TastyBytes

HTML

<div id="background"></div>
<div id="gradient"></div>
<div id="overlay"></div>

CSS

* { margin: 0; padding: 0; }
#background {
    height: 800px;
    width: 800px;
    top: 0;
    left: 0;
    position: absolute;
    
    background-color: #555;
    background-repeat: no-repeat;
}
#gradient {
    background: -webkit-radial-gradient(center, ellipse cover, #aae02c 0%,#555555 :;0%);
    height: 800px;
    width: 800px;
    top: 0;
    left: 0;
    position: absolute;
    transition: none;
}
#overlay {
    background: url(http://mds.dev/dev/overlay.png);
    height: 800px;
    width: 800px;
    top: 0;
    left: 0;
    position: absolute;
}

JavaScript

(function() {
    var div = document.getElementById('gradient');
    var overlay = document.getElementById('overlay');
    
    overlay.addEventListener('click', function(e) {
//        overlay.addEventListener('mousemove', function( e ) {
            console.log( e );
            div.style.transition = 'none';
            div.style.opacity = "1";

      
            div.style.backgroundPosition = ( e.x - div.offsetWidth / 2 ) + 'px ' + ( e.y - div.offsetHeight / 2 ) + 'px';
            
            div.style.transition = '1s opacity .2s ease-in';
            div.style.opacity = "0";

            
//        });
    });
    
})();