Mouseover effect to spread overlapping icons / images

Hello, on the system I'm working on there are some icons / images (which are div's) that sometimes overlap. This is their correct functioning, they update their positions automatically and sometimes stand on top of each other, but it is necessary to create a functionality in the system so that when they put the mouse over the overlapping images, they spread like an explosion, which could be circular in shape around the mouse pointer. I tried doing with jQuery using the animate method and with JavaScript using offset but I still did not succeed. 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");
                });