Why my image is teleporting when I'm hovering the image by my mouse cursor inside the div-CodePudding

So basically I've seen a lot of advance animation websites. And I tried to create a image wherein it follows the images as I move my mouse cursor along with div coordinates.

Basically the code is like this in my codepen.

https://codepen.io/myth-vince/pen/PoQJOXj

When you try to move the cursor into the image..it will just like teleport on the top left because I think that is the constant rect height ord width of the image.

If anyone can help me with this..It will be a big thanks. I've created some advance animation like this but never met this before that just teleport suddenly.

I believe it has something with this

var rect = e.target.getBoundingClientRect();
        console.log(rect)
        var x = e.clientX - rect.left; //x position within the element.
        var y = e.clientY - rect.top;  //y position within the element.

Or maybe the SCSS but I don't know where because everything seems fine..but I think the only really problem here is because when I try to make it also center the image in the mousecursor it will just adjust itself and will not align in center of mousecursor cause it is avoiding it to teleport.

EDIT

For more information.. the part of mouseover and mousemove the mousemove will only starts when the mouse is hovering the div so it the image will start to move out.

Now for the second I need to get the e.clientX and e.clientY so that it could get the where the part of div is. And as rectX and rectY is the getting the height and width part of it

Show DIV at mouse cursor on hover of span

you can see it here the link.

and where did I get the delaying the motion of images is here

https://stackoverflow.com/questions/9136261/how-to-make-a-setinterval-stop-after-some-time-or-after-a-number-of-actions#:~:text=To stop it after running,reached that number clear it.

CodePudding user response：

var rect = e.target.getBoundingClientRect();

There's your problem.

Like most other event types, the mousemove event bubbles up through the DOM.

When you put the cursor over one of those images - then e.target is not the box any more, but that particular image. So you are not working with the getBoundingClientRect data relating to your box now, but to the particular image.

As soon as you make this

var rect = box.getBoundingClientRect();

instead, the problem is gone.