JSFiddle - React, Tailwind, and code Playground

by Porfirio Chavez

HTML

<!--<img src="http://aoifeodwyer.com/box/img.gif" width="100" height="100" alt="Grey Square" id="img" class="circle"/>-->
<div id="contenedor">
<div id="otro" class="circle"></div>
<div id="otro" class="circle"></div>
<div id="otro" class="circle"></div>
<div id="otro" class="circle"></div>
<div id="otro" class="circle"></div>
<div id="otro" class="circle"></div>
    <div id="otro" class="circle"></div>
<div id="otro" class="circle"></div>
<div id="otro" class="circle"></div>
    <div id="otro" class="circle"></div>
<div id="otro" class="circle"></div>
<div id="otro" class="circle"></div>
    <div id="otro" class="circle"></div>
<div id="otro" class="circle"></div>
<div id="otro" class="circle"></div>
    
</div>

CSS

body { position: relative;
        }
#img { position: relative; }

#contenedor{
   
    width: 300px;
    height: 300px;
    background-color: #FAA;
}
.circle {
    float: left;
    position: relative;
	border-radius: 50%;
	width: 50px;
	height: 50px;
    background-color: #FCC;
	/* width and height can be anything, as long as they're equal */
}

JavaScript

jQuery(function($) {
    $('.circle').mouseover(function() {
        var dWidth = 300 - 50, // 50 = image width
            dHeight = 300 - 50, // 50 = image heigh
            nextX = Math.abs(Math.floor(Math.random() * dWidth)),
            nextY = Math.abs(Math.floor(Math.random() * dHeight));
  //      console.log(dWidth);
        $(this).animate({ left: nextX + 'px', top: nextY + 'px' });
        //console.log("left"+ nextX + 'px'+" top:"+ nextY + 'px' );
    });
});