Problem 'parent' desides the color of child=text not working

[KarelRosseel82 (Karel Rosseel)]

I was working on the site www.wwsv.be to make it in webflow with the students…
It seems not always working for them…
'color gext and backgroundimage must change together when you hover menu-div!

=>When I hover ‘sun with clouds’ = backgroundimage changes by mousehover: in other background

• text inside the same ‘sun with clouds’ with a margin-left becomes black.

=> Conclusion: When the parent is mousehover
also the textitem inside a parentdiv ‘is the boss’ so parent need to change BOTH: the text and backgroundimage in black…

and than combine alle icons into a ‘social menu’

so for METEO

than

than

Thanks to help me (and students)
Karel

My version: (that works)
https://preview.webflow.com/preview/ikwatersport-karelrosseel?utm_medium=preview_link&utm_source=designer&utm_content=ikwatersport-karelrosseel&preview=7b6638f4105d8982283c05d226cb5caa&mode=preview

Please can somebody test this same idea of working… because with the students test the parent-hover only background changes and not thr color of the textitem… should change together with the image! isn’it?

[RileyJones]

Hi there @KarelRosseel82,

Thanks for reaching out to the forums!

This is a great question, so thank you for asking.

Changing the background image on a hover state is going to have a different effect is it is replacing an image out for another rather than rendering a new color for the text.

One way we can make this smoother is by keeping the sun-cloud-wit graphic hidden on the hover state so it won’t have two graphics conflicting with each other while being hovered hover.

Hopefully this helps a bit, and let me know if you have any further questions; I’m here to help.

Riley

[KarelRosseel82 (Karel Rosseel)]

hi RileyJones nice idea but in practice solution?
Works this always?
I know the best way is using a fontawesome.ttf imported by fonts in Webflow.=> but how to work when the icon is not from the fontawesome.?

Do you know how this is made: the line under the text = lottie-file? https://www.vocvo.be/nl/opleidingen/geletterd-geintegreerd-duaal-klare-taal-inspiratiedag-ondersteuning-van-cursisten-het

[RileyJones]

It could work for this use case. Another idea, since only black and white options are being used, is manipulating the CSS filter option and using the invert filter to change the color of the icon.

The example of that site is using a background image with some animation to reveal the graphic on the :after element of the title tag.