Text Hover affecting BG color?

Hi Webflowers!

I am wondering how to achieve an hover effect where you hover over a text and it changes the color of the text itself and the background color of the entire div that contains the text.

Below is the example of what I am saying. Just scroll down to the very bottom section of the page.

Any help would be greatly appreciated. Thank you!


Here is my public share link: LINK
(how to access public share link)

If you put a text in a DIV, and DON’T set a text color on the text, but set it on the DIV, the text will inherit the text color property of the div. So that now you have both the bg color and the text color properties on the same element.

Now edit the hover state of the DIV and change both the text and the bg color. Add transitions for both bg color and text color (on the default state of course) and I think you should be close to what you’re looking for.

That’s the pure CSS and easy way to do it. There’s a way more complicated way to do it with Interactions though.

Thank you Vincent for your help!

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.