menu text color change when overlapping with images

[piotr]

Hi there,

I’m working on a minimalistic website. Here’s a link to the draft:

https://lightpink-nightingale-503473.hostingersite.com/projects/

While the website is quite simple, I’d like to add a special effect. Specifically, I want the menu text to turn white when it overlaps with images or project thumbnails while scrolling.

I’ve searched through the forum for solutions and found similar entries—such as those explaining how to change menu text color based on the row background colors. I attempted to use the same principle, but instead of assigning the custom class to a row, I applied it to the project thumbnails or images. Unfortunately, it didn’t do anything.

Ideally, I’d also like to extend this effect to the site title and potentially other normal text elements.

Any advice or suggestions would be greatly appreciated!

@arminunruh
@Richard
@mariusjopen

[arminunruh]

for menus:

.laynav.desktop-nav{
mix-blend-mode: difference;
}

Enter this css in "lay options" -> "custom css & html" -> "custom css for desktop"

but you have to use a white color font for your menu items.
in customize → menu style → primary menu → text color

and possibly in
in customize → menu style → menu point active → text color
in customize → menu style → menu point mouseover → text color

[arminunruh]

for site title:

.sitetitle{
mix-blend-mode: difference;
}

and you need to set the site title to white font too!

I think if you had a black background website maybe you need to set the texts to black not sure about that!

[piotr]

Hi Armin, thanks for the reply!

I get a message when I paste the code: "Unknown property: mix-blend-mode"

Does it mean then that the menu text will automatically change to black while scrolling down when it overlaps with the background instead of the project thumbnail or an image? Or do I need to add some extra custom CSS and assign class to a row for instance?

[arminunruh]

the code for the editor is just so old, it doesnt recognize that css as valid css

no extra css is needed
the color will always depend on whats beneath the text

[piotr]

Hi @arminunruh

Thanks a lot, it worked great! Quick question, as an option - will it be very complicated to make it changing to pure white text color when overlapping with an image?

[arminunruh]

thats not possible i think