Hover over and out

gummytiger · February 22, 2018, 6:11pm

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!

garymichael1313 · February 22, 2018, 7:15pm

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

gummytiger · February 22, 2018, 7:42pm

Yes 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!

garymichael1313 · February 22, 2018, 7:49pm

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

gummytiger · February 23, 2018, 5:52pm

Thank you very much!

philippe · February 23, 2018, 6:37pm

Here’s a simple demo:

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

Clone link:
https://webflow.com/website/hover-a-card?s=hover-a-card

Robby · August 18, 2020, 2:32pm

@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.

garymichael1313 · August 18, 2020, 3:04pm

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.