Mouseover effect to spread superimposed icons/images

Question

Hello, on the system I am working on there are some icons/images (which are div’s) that are sometimes superimposed. This is the correct functioning of them, they update their positions automatically and sometimes stay on top of each other, but it is necessary to create a functionality in the system so that when placing the mouse on the superimposed images, they spread (like an explosion), which could be in circular shape around the mouse pointer. I tried to do with jQuery using the Animate method and with Javascript using offset but I haven’t been successful yet. If anyone has any tips I will be immensely grateful.

var img = $(Document.createelement('div')). attr({ class: 'icon' }). css('left', left);

                $(img).mouseover(function () {
                    $(img).animate({ "top": "-=10px", "left": "+=10px" }, "slow");
                });
                $(img).mouseout(function () {
                    $(img).animate({ "left": "-=10px", "top": "+=10px" }, "slow");
                });