Streaming live at 10am (PST)

Hover and normal state background


For the donation button, I select the Hover state and set the background color opacity to 100%. Then I go to the normal state “None” and set the background color opacity to 25%. Then I set a transition for background color at 600ms.

In this exact order, It does not work.

Now, when I go to the hover button state, I see this:


The color in the small box at the bottom right is showing a 100% opacity. But the opacity indicator is showing 25%!

If I reverse the steps, setting the hover state at 100% and then normal state at 25%, I see this for the normal state:


Everytime I set the background opacity for a state, it replicates on the other state, but somehow it does not show on the canvas.

I think this is why the transition is not working. Why I hover over the button, no 600ms of transition takes place. Check out the link below.

This is versy confusing, is this a bug?


Here is my site Read-Only:

I saw it in the stae you’re showing, but after editing it, it worked as expected. I’m not using bg solid colors but just the bg color field

I understand Webflow might not have preapred for a transition in changing BG image. But still, the Solid Color is a BG color.

Still learning. Thank you Vincent, love your work.

1 Like

But still, the Solid Color is a BG color.

It’s not. And sorry, I didn’t take enough time to explain this. Wether a transition can happen or not between colored elments is not Webflow’s choice, or resulting from a lack of preparation.

Let me explain what’s possible and what’s not.

To begin with, when you set a bg-color on an element, it’s a CSS background color.

.cell {background-color: #42d2ff;}

When you set a hover bg color, it’s still a CSS bakckground color, declared for a :hover state.

.cell:hover {background-color: #42d2ff;}

Last, when you set a transition between those bg colors, it’s a regular CSS transition.

.cell {transition-property: background-color; transition-duration: 200ms; transition-timing-function: ease;}

So here there is no magic at all, not Webflow special feature, no magic, it’s just basic CSS, and the result is expected.

Now about images : there is no logic way to transition from an image to another. Usually, a fade is used (which involves opacity, or a combination of fade and blending. But in CSS, there is no way to fade between an image to another, no property for this. If an image is different for the hover state than the normal, then it’s a normal swap with no transition.

It’s possible, with HTML and CSS, to craft a transition from an image to another, but it involves several things: a structure of several elements ordered in z, opacity properties for each, and interaction of those properties to make one image fade out when the other is revealed. In our Webflow framework, that means a litle more than just a hover state: a more complex interaction. (well you could also make one element become transparent on hover and reveal what’s underneath, and that would be purely using states.)

So to understand why CSS transitions can’t happen between solid color colored element, or gradient colored element, you have to check what CSS is actually involved on such elements. Let’s add a solid color or a gradient to an element and inspect it:

background-image: linear-gradient(rgb(192, 255, 66), rgb(192, 255, 66));

Yes, that’s true, a solid color in Webflow is actually a flat gradient, which in CSS is a background-image.

So there is no way for Webflow to use CSS to transition this. Only you can craft a more complex Interaction to fade from a bg image to another.

1 Like

This is a very good explanation.

For the image transition part, I was wondering the other day if the slide-show element can be CMS enabled, I think Webflow team said somewhere that they working on it. But with the opacity trick you mentioned, I can imagine how it could be possible to do it with interactions.

Thank you Vincent, that was very helpful.

CMS Slider will be a very popular thing if they bring it :slight_smile: