Streaming live at 10am (PST)

Background transition on hover


#1

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>

#2

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.


#3

Hi @thesergie, I was trying background-image.


#4

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.


#5

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?


#6

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/


#7