"Mouse over element" interaction problem

Design help Animations & Interactions
1

Ive created a hover effect on a iPhone image.

The issue is that the interaction moves the image to a new unwanted position and therefore creates a jumpy move when the interaction is first triggered.

I have no idea why this is happening. View the GIF and read-only link

ezgif.com-video-to-gif-5

Here is my public share link: https://preview.webflow.com/preview/countive-redovisningsbyra?utm_medium=preview_link&utm_source=designer&utm_content=countive-redovisningsbyra&preview=25ab3df8747500a8a800eae692e08638&mode=preview
(how to access public share link)

2

Hi @Webflow-user, you can try setting the positions to -5px to 5px instead of 0px to 10px for both X and Y.

Then set the Resting State to 50% and 50%. I’ve tried this setting and seem to remove the jumpiness.

1 Like
3

Amazing, worked like a charm. Thank you so much.

4

You can just change the load in target from Image to the Div Block 2 parent.