â–Ľ
Streaming live at 10am (PST)

Hiding elements from rollover trigger

Design help Animations & Interactions
#1

Hello,

I am new to webflow and am attempting to create a rollover animation for portfolio thumbnails. I would like them to zoom in a bit, darken down, and have some information in a Div block slide in on the rollover.

I have this all working, except that when the cursor touches any of the information text in the foreground of the thumbnail, it triggers the rolloff animation.

Is there any way to hide elements from the cursor interaction so that it will not trigger the rolloff animation?

Thanks in advance.

  • Justin

Here is my public share link: https://preview.webflow.com/preview/js-port-sketch?utm_medium=preview_link&utm_source=dashboard&utm_content=js-port-sketch&preview=e9aee9aa2be75840b996d941a6311d20&mode=preview

#2

You already solved it, or?

#3

No, I have not solved it.

In the share link, when you roll over an image everything looks as it should. While in the rollover state, if you rollover a piece of text on the image, it triggers the rolloff animation.

I am trying to figure out how to make the text not trigger the rolloff animation.

#4

Ok.

I found your issue. I was a bit confused about “rollover state” you mean “hover”
If your mouse rollover the text, it triggers the rolloff animation. That true and right by the software because you are leaving the rollover area and it plays the rolloff animation.
To avoid it:

  • put an Div around everything and give the “hover” to the div
    But thats not what you want!
    You have to use “interactions” not the CSS “hover” effect, because of different target
1 Like
#5

Thank-you, Matthias. This worked perfectly for me once I tracked down all of the “hover” state stuff I had implemented and put everything into an interaction.

P.S. also, thanks for translating my old-school “rollover state” language into “hover”. I will learn!

1 Like