JSFiddle - React, Tailwind, and code Playground

by fsb1337

HTML

<div class="container">
		<div class="follower"></div>
 	</div>

 	<div class="container">
		<div class="follower"></div>
 	</div>

 	<div class="container">
		<div class="follower"></div>
 	</div>
 	<div class="container">
		<div class="follower"></div>
 	</div>
 	<div class="container">
		<div class="follower"></div>
 	</div>

CSS

.container {
    width:200px;
    height:50px;   
    overflow:hidden;
    border:1px solid #000000;
    display: inline-block;

    vertical-align: top;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;

    background: rgb(247,247,247);
    background: linear-gradient(to bottom, rgba(247,247,247,1) 0%,rgba(219,219,219,1) 39%,rgba(201,201,201,1) 55%,rgba(188,188,188,1) 81%,rgba(204,204,204,1) 100%);
    outline: none;
    /*
    overflow:hidden;
*/
}

.follower {
  position : relative;
  background-color : yellow;
  width:300px;
  height:100px;
  opacity: 0;
  transition: 1s;
  background: radial-gradient(ellipse at center, rgba(71,193,255,0.67) 0%,rgba(93,175,216,0.29) 32%,rgba(115,156,177,0) 65%,rgba(137,137,137,0) 98%); 
}
.follower:hover {
  opacity: 1;
}

JavaScript

var mouseX = 0, mouseY = 0, limitX = 150-15, limitY = 150-15;
$('.container').mousemove(function(e){
   $(".follower").show();
  var offset = $('.container').offset();
    console.log(e);
   mouseX = Math.min(e.pageX - offset.left, limitX);
   mouseY = Math.min(e.pageY - offset.top, limitY);
   if (mouseX < 0) mouseX = 0;
   if (mouseY < 0) mouseY = 0;
});

/*
$('.container').mouseleave(function() {
        $("#follower").hide(); 
});    
*/
// cache the selector
var follower = $(".follower");
var xp = 0, yp = 0;
var loop = setInterval(function(){
    // change 12 to alter damping higher is slower
    xp += (mouseX - xp);
    yp += (mouseY - yp);
    follower.css({left:xp, top:0});
    
}, 30);