Really need help with interactions

Design help Animations & Interactions
1

Hi,

How do I make the image zoom in when I hover my mouse to the image?
For example, if you move your mouse on the icon buttons on the home page, it animates. http://template-hide.webflow.io

I hope someone can help me!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi @Angeline_Neo

This is quite simple.

First, select your image in the canvas and click on the blue arrow in the selectors-tab. Then click on Hover.

58

Then scroll all the way down to the Effects-panel and click on Transforms.
Then go to the Scale tab and choose the size you want when the image is hovered.

10
10520×672 44 KB

Now your image grows when you hover over it. If you want a smooth growing effect, just do this:

First, go back to the None state in the selectors panel.

56

Then scroll down again and click on Transform in the Effects panel.

59
59506×646 24.9 KB

Then choose the type Transform.

55
55514×2494 152 KB

Now you can choose the duration and the easing curve you want for the animation.

And your DONE :slight_smile:

I hope this could help

3

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.