JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>
<div></div>
<div></div>
<div></div>

CSS

div {
    width: 200px;
    height: 500px;
    float: left;
    margin: 5px;
    background: red;
}

JavaScript

var originalBG = '',
    lightColor = 'fff',
    gradientSize = 5,
    delayCss = function (el, map) {
    	setTimeout(function () {
				$(el).css(map);
      }, 555);
    }

$('div')
.mousemove(function(e) {
    originalBG = $("div").css("background-color");
    x  = e.pageX - this.offsetLeft;
    y  = e.pageY - this.offsetTop;
    xy = x + " " + y;

    bgWebKit = "-webkit-gradient(radial, " + xy + ", 0, " + xy + ", 100, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0.0))), " + originalBG;
    bgMoz    = "-moz-radial-gradient(" + x + "px " + y + "px 45deg, circle, " + lightColor + " 0%, " + originalBG + " " + gradientSize + "px)";

		delayCss(this, { background: bgWebKit });
    delayCss(this, { background: bgMoz });

}).mouseleave(function() {
		delayCss(this, { background: originalBG });
});