▼
Streaming live at 10am (PST)

Looking for help with a smoother hover transition

Design help General
#1

Hi Webflow -
I’m trying to achieve a smooth background transition when hovering over content blocks on my site’s home page. Here is the staging site:

The boxes of content beneath the hero slider all have interactions set - background color or image changes, copy slides in/out, icon transitions to full opacity - and all are working, but the background transition is immediate although I have a 500ms duration set for it. Even if I remove all the other interactions, I still can’t get the background to transition over time. It just ‘blinks’ to it’s hover state. Can anyone provide assistance with this?

Thanks!

#2

Can you share your read only link please?

#3

Sure:
https://preview.webflow.com/preview/cognistx?preview=d214ac87723848665a7eba9ae670bbf7

#4

Your transition is set to background colour, which is not exactly what you want. The best way to do this is adding a Div with certain opacity or/and image and then create an animation that shows it and hides it once hover the main element.

#5

So I have to add another div on top with opacity set for each state? I can do that but this seems like an unnecessary step. Is there a reason the background color of the hover state doesn’t simply transition over 500 ms?

#6

Yeah you can do that.

The reason why is because that is not a background colour but a CSS attribute

#7

Ok, I see. Will try that. Thanks for your help.

1 Like
#8

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.