Looking for help with a smoother hover transition

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:

http://cognistx.webflow.io

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!


Can you share your read only link please?

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

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.

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?

Yeah you can do that.

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

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

1 Like

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