Streaming live at 10am (PST)

Hover interactions through Webflow interface

Hi Everyone,

I am looking to understand how to do some hover interactions using the webflow interface.

Here are my two questions with provided example:

  1. Is there anyway to keep a complex “hover in” animation active, so that you can visually reverse the automated process, while working in the webflow environment? (In the below example I want to reverse the fade and slide in states of the heading hover)

  2. Does it work in webflow to create the “hover out” interaction on a different element. For instance, in the example below, I “hover in” on the Header, but on “hover out” I want to have that tied to the div block that slides in. (So if the user does not click the button, and they hover off of the left slide-in div block, then the animation “hovers-out” to default position.

Hover in example

Thanks in advance,

Here is my public share link: LINK
(how to access public share link)

I feel a little dumb, as someone pointed out that you would just use a masked div element that would expand, and set that as the hover state, instead of the header. So that is resolved.

What I still want to know is, if there is a way to see and set the hover state animation as “active” while working on the “hover out”, so that you can reverse the process.

Any help here would be greatly appreciated.

Nope. You have to copy your hover in interaction and move around the animations so that it is reversed