JSFiddle - React, Tailwind, and code Playground
HTML
<div style="position: relative; left: 0; top: 0;">
<img id="1" src="http://i.stack.imgur.com/bFfbC.png" style="position: absolute; top: 0; left: 0;" onmousemove="animateCircles(this)" />
<img id="2" src="http://i.stack.imgur.com/Eewcq.png" style="position: absolute; top: 0; left: 0;" onmousemove="animateCircles(this)" />
<img id="3" src="http://i.stack.imgur.com/VXk7A.png" style="position: absolute; top: 0; left: 0;" onmousemove="animateCircles(this)" />
</div>
CSS
.normal {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.onhover {
-webkit-transform:scale(1.25);
-moz-transform:scale(1.25);
-ms-transform:scale(1.25);
-o-transform:scale(1.25);
transform:scale(1.25);
}
JavaScript
function animateCircles(obj) {
var x = window.event.x - obj.offsetLeft;
var y = window.event.y - obj.offsetTop;
var img1 = document.getElementById('1');
var img2 = document.getElementById('2');
var img3 = document.getElementById('3');
var centerR = 45;
var middleR = 75;
if (x >= img3.offsetLeft + (img3.offsetWidth / 2 - centerR) &&
x <= img3.offsetLeft + (img3.offsetWidth / 2 + centerR) &&
y >= img3.offsetTop + (img3.offsetHeight / 2 - centerR) &&
y <= img3.offsetTop + (img3.offsetHeight / 2 + centerR))
img3.className += " onhover";
else
img3.className = "normal";
if (x >= img2.offsetLeft + (img2.offsetWidth / 2 - middleR) &&
x <= img2.offsetLeft + (img2.offsetWidth / 2 + middleR) &&
y >= img2.offsetTop + (img2.offsetHeight / 2 - middleR) &&
y <= img2.offsetTop + (img2.offsetHeight / 2 + middleR))
img2.className += " onhover";
else
img2.className = "normal";
if (x >= img1.offsetLeft &&
x <= img1.offsetLeft + img1.offsetWidth &&
y >= img1.offsetTop &&
y <= img1.offsetTop + img1.offsetHeight)
img1.className += " onhover";
else
img1.className = "normal";
}