Streaming live at 10am (PST)

Background transition on hover

Hi there

I can’t seem to find background transition option if I want to add a transition effect on hover state. Apart from adding below as custom code is there another option?

<style>
.container-class {
    -webkit-transition: background 0.5s ease-in-out;
    -moz-transition: background 0.5s ease-in-out;
    transition: background 0.5s ease-in-out;
}
</style>

Hi @Cem are you trying to transition Background-color? Or a background-image? Unfortunately you can’t transition a background image using CSS. You can transition it by “moving it” with background position though.

Hi @thesergie, I was trying background-image.

Sadly there is no way of transitioning a background image using CSS. It’s just impossible. A way you can transition images is putting two image elements on top of each other using absolute positioning. That’s what I did on this site: symbols.webflow.com.

Thanks Sergie

Is it possible to have public link for symbols.webflow.com so we can look at how you did it in webflow. Or is there something similar in tutorials?

It isn’t possible to transition a background image? Isn’t that what I’m doing for the Social Icons (top right) on this site? - http://www.honestenterprise.tv/