Change background gradient on hover with transition

Tagged: ,

Author Posts

LonelyViking August 7, 2018 at 8:28 pm

Hey there 🙂

I have set the background gradient in the second section on this page to subtly change on hover (#home-success:hover) – https://lonelyviking.com/

I have been trying to slow down the transition and tried a bunch of different things but I can’t get it to work.

Firstly, is it possible to apply transitions to a gradient? If so I would love some guidance on it 🙂

Thanks!

Sebastian August 8, 2018 at 11:48 am

It looks like CSS background-image/gradients aren’t animatable according to this thread: https://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds

One workaround, which may or may not be desirable in your case, is to set the background-position and/or background-size to be different on hover. And set background as the transition property. This method is demonstrated here: http://sapphion.com/2011/10/25/css3-gradient-transition-with-background-position/

Another workaround, would be to set background-color as the transition property, with a different background color than usual via MT’s transition event value field. Then, set one of the two gradient colors to have zero opacity by dragging the opacity slider down on the color picker. That way the gradient is just one color fading out, instead of blending into a new color. And when the user hovers over the element, the plain background color will transition, creating the effect that the gradient is transitioning.

I hope that helps!
Cheers,
Sebastian

You must login or register to reply to this topic.