JSFiddle - React, Tailwind, and code Playground

by Park Mino

HTML

<div id="div1"></div>

CSS

#div1 {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: red;
  opacity: 0.4;
  top: 40%;
  left: 40%;
  border-radius: 1000px;
  margin: auto;
}

JavaScript

$(document).ready(function() {
   var div1_css_top = $('#div1').css('top');
   var div1_css_left = $('#div1').css('left');
   var div1_css_width = $('#div1').css('width');
   var div1_css_height = $('#div1').css('height');
   var xsize = 25,
     ysize = 25;

   $("#div1").mouseover(function() {
     var $this = $(this);
     var dpos = $this.position();
     var dwidth = $this.width();
     var dheight = $this.height();
     $this.animate({
       top: dpos.top - ysize,
       left: dpos.left - xsize,
       width: dwidth + (2 * xsize),
       height: dheight + (2 * ysize),
       opacity: 1
     }, {
       duration: 500,
       easing: "swing"
     });
   });
   $("#div1").mouseout(function() {
     $(this).animate({
       top: div1_css_top,
       left: div1_css_left,
       width: div1_css_width,
       height: div1_css_height,
       opacity: 0.4
     }, {
       duration: 500,
       easing: "swing"
     });
   });
 });