Hover Image -- Move center with cursor

Design help Animations & Interactions
1

Hey fellow webflow enthusiasts… I have a somewhat newbie question. I love the effect on [this page], as you hover over a section an image pops up. I know how to do that – but how do I get the center of the image to follow the cursor?

2

Hi @Heather_Jansen !

Yeah that effect of the site is very cool. There is a pretty simple solution to this.

The way I would do this is:

  • Make a wrapper that contains everything (“Test Hover” - In Photo Below)

  • I made it (Fixed) (100VW) (100VH) (Flexbox - Center - Center)

  • If you want a single image you can put that directly into the wrapper but if you want it to swap images I would make a containing div block (“Image” - In Photo Below)

  • From there I would add a (Mouse over Element) Element Trigger to (“Test Hover” / Your Wrapper)

  • Make a new mouse move animation

  • On (Mouse X) animations at 0% and 100% add a move transform for (“Image”)

  • At 0% only set (Transform X) to -50VW

  • At 100% only set (Transform X) to 50VW

  • On (Mouse Y) animations at 0% and 100% add a move transform for (“Image”)

  • At 0% only set (Transform Y) to -50VH

  • At 100% only set (Transform Y) to 50VH

image
image1920×1040 145 KB

As a side note you can change opacity inside this mouse animation of the image(s) like the edges the photo fades out at about 10% or so.

If you need more help let me know!

Sean

3

Thanks Sean! Any idea on how they got the image center/edges to convex and concave with mouse movement?

4

That is a really good question.

The only way I could think to do that natively in Webflow would be to use Lottie to create an animation from normal to convex and concave to the left right up and down.

From there I would use (Mouse over Element) Element Trigger like I showed above except on the Div/Image and animate the Lottie as you get farther away from the center.

Because of the smoothing of the animation of following your mouse there would be a slight offset from dead center while moving so your trigger points would be much closer to 50% on the X and Y transformations. (This would take some trial and error to get the way you want)

–

Now I do wonder if you can use custom code on the images that someone has created already to simplify the process and not have to create a Lottie animation for each photo you want. This is what it looks like the original creator did. You might be able to ask @Ambre_Mgt.

I am not familiar with that sort of stuff but I will tag @Waldo and see if he has someone that knows more about that or if he himself knows more about it.