JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<input />
<span>
<div class="a"></div>
<div class="b"></div>
</span>

CSS

span {
    background: #000;
    width: 600px;
    height: 600px;
    display: block;
    position: relative;
    overflow: hidden;
}
div {
    width: 100px;
    height: 100px;
    outline: 1px solid #F00;
    position: absolute;
}
.a {
    background: #F00;
    top: 20px;
    left: 100px;
    z-index: 2;
}
.b {
    background: #0F0;
    left: 30px;
    top: 100px;
}

JavaScript

var offset = $('span').offset();
$('span').mousemove(function(e) {
    var x = e.pageX-offset.left;
    var y = e.pageY-offset.top;
     px = 100;
    py = 300;
    w = (100*(1-(Math.abs(px-x)/300)));
    h = (100*(1-(Math.abs(300-y)/300)));
    $('.a').css({
        top: y - (h/2),
        left: x - (w/2),
        width: w,
        height: h
    });
    
    //*
    px = 300;
    py = 300;
    w = (100*(1-(Math.abs(px-x)/300)));
    h = (100*(1-(Math.abs(300-y)/300)));
    $('.b').css({
        top: y - (h/2),
        left: x - (w/2),
        width: w,
        height: h
    });
    $('input').val('X:' + (x) + '; Y:' + (y));
});