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?
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?