Linear-Gradient Cover Fade In/Out Interaction

Greetings Webflow family!

I am hard-stuck trying to solve a interaction! (found at the bottom of www.known.is)

Essentially, when you scroll down to the section seen in the screenshot, there is a stable linear-gradient cover with text. Upon hover the gradient cover with wording is removed, and the next interaction follows with an informational dark transparent-text box on the column you are hovering.

I am managed to solve the second dark-transparent interaction. But am unsure how to add the first stable linear-gradient cover with text on top of it with the interaction described above.

Can anybody with more knowledge provide with me with assistance? It will be greatly appreciated!

Thank you,
Joseph

hi @Josephlee_Mosqueda-W here is simple [example] to study how it can be done

live demo page
https://hoverinteractions.webflow.io/

Hello @Stan - I am not able to get either of the links to work. Hmmm :confused:

yeh I have deleted these as there wasn’t any response to solution so I presumed there is no need of any help. I can add these back if necessary.

i’d be glad to check it out!

hi @Josephlee_Mosqueda-W the read-only and live preview are now active again. Feel free ask questions if you will need some clarification.

1 Like

hi @Josephlee_Mosqueda-W do you need further assistance with your request? If example I have provided solved your issue feel free to close request.

1 Like

You nailed it Stan! I am curious what steps you took to do this as I am unable to see your exact steps here! I’d be glad to finish closing up the request!

Oh, I have deleted it as after republishing the links there was no response again for a few weeks. So here it is for the last time.

1 Like

You are amazing my guy! Sorry for that - marked as solved!

I still peroidically go back and learn from this post. I can’t tell you how grateful I am you helped me out on this post. You’re da bes!

1 Like