JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>

CSS

body { position: relative; }
.img { position: absolute; width: 100px; height: 100px; background: red; }

JavaScript

jQuery(function($) {
    $('.img').mouseover(function() {
        var dWidth = $(document).width() - 300, // 100 = image width
            dHeight = $(document).height() - 300, // 100 = image height
            nextX = Math.floor(Math.random() * dWidth),
            nextY = Math.floor(Math.random() * dHeight);
        $(this).animate({ left: nextX + 'px', top: nextY + 'px' });
    });
});