Streaming live at 10am (PST)

Hover interaction issue

Hi there,

I’m trying to create a hover interaction where:
• the image gets resized
• the heading moves
• some text reveals at a specific location

It’s working fine when I hover in and out from the left side of the element (technically the side that remains at the same spot) but then when I try it from anywhere else, the interaction glitches and spazzes out.

State before hover:

State after hover (the correct result):

I couldn’t upload a video of the glitchy one, so you could see it using my live preview by visiting the PROJECTS page and previewing it with the interaction set on the CONVERSE project.

I’m new to Webflow and would appreciate any help :slight_smile:

Here is my public share link: LINK

how to access public share link

Do not target the object you want to be resized with hover ix. Because your also add “on hover out” to this object which make this object to enlarge again, once you hover from the side from which the object resizes there will come a point when the object left your hover, initiating hover out, enlargin the object. It then bumps into your cursor again, making it smaller, leave the hover state again… hence the glitch. Make sure the area that is a trigger always stays the same size. Put everything inside a div and put this div inside your interaction trigger. Then target this inner div and resize it.

Super useful @dram it worked like a charm. Thank you very much!

1 Like