Is there a way to transition a line of text to gradient on hover?

Design help Animations & Interactions
1

Hello Webflow community,
I have recently started my first project on Webflow and I would like to know if there is a way to make a transition between hover states with respect to gradients.
The goal is to make the gradient fade in on hover, although I cannot seem to find an option to do so.
Is there any way at all to make this possible?

image >>> image

Here is my public share link: [https://preview.webflow.com/preview/nowapp?utm_medium=preview_link&utm_source=designer&utm_content=nowapp&preview=1f16564ba58ca541c0dc8f7111821bbd&mode=preview]

Thanks for reading,
William

2

Unfortunately there is no transition for background images/gradients etc.

1 Like
3

Is that a limitation of Webflow, or would it be implemented in the future?

4

No, this is a css limitation.

1 Like
5

Well, there is an ugly workaround where you absolutely position the same word with different background in front of your main word and then make its opacity go to 0 on hover.

1 Like
6

Hi, what I have found:

  1. you can if you add the gradient on the hover STATE ( using the state selector in the CSS , not by animation)

  2. you can add it in animation by having the element with the gradient on, then add animation FILTERS (Brightness and grayscale or play with the combinations) to make it look like a solid color