Streaming live at 10am (PST)

Hover over and out

How to achieve the same “Hover over and out” effect in Interaction 2.0 site? I don’t see any tutorial for that particular effect. Please advice.

Thanks!

Do you mean the section titled “Create rich hover animations”?

Yes :slight_smile: So it will be great to know if I need to create a div within the container or under it. Also what should I set for hover out.

Thanks!

Sure, go to my collection site, under “Hover Image Icons”. There’s an example of the combination hover effect.

https://preview.webflow.com/preview/gj-project-backup?preview=fe3759b3f1b4ca487673f8b2881e046c

Thank you very much!

Here’s a simple demo:

http://hover-a-card.webflow.io/

Clone link:

1 Like

@philippe - I know this is an old post, but when I cloned the project and tested the animation, hover-out effect no longer works. Is this a problem with the way animations are working in the latest version of Webflow? I am new to using Webflow. Just a heads up. :slight_smile:

Hey @Robby,

Animations are based on the page. Make sure the page names are the same - AND - the interactions is actually in the list for that page.

Just double check this beforehand, copying will rename items if there’s a conflict with duplicate names.

1 Like