Marquee Text Color Change Based On Background

[lecksus (Ryan Leckie)]

Hey all!

So I’m trying to create a menu page where a picture appears behind the text when you hover over the text. I’d like the text’s color to change so that it contrasts nicely over the background image, but I can’t seem to figure out a solution. I found a thread covering the “mix-blend-mode: difference” option, but that’s not working for whatever reason.

I tried adding an ID and targeting the ID using custom code, but that didn’t work.

Any help would be greatly appreciated! Thanks all.

NOTE: When you click the link to my project, focus solely on the third row of text shown on the page. This is my test row. The other two rows already have old animations associated with them that don’t fit the new direction I’d like to go with this page. So again focus on that third row.

Here’s an example from another page. This is exactly the kind of effect I’m trying to achieve here:

---

Here is my site Read-Only:
https://preview.webflow.com/preview/portfolio-f9d3a3?utm_medium=preview_link&utm_source=designer&utm_content=portfolio-f9d3a3&preview=325d9594cb61b4343296af8b798be0dd&pageId=60646d599f787026e073c4c8&mode=preview

[Stan (justAnotherDeveloper)]

hi @lecksus first you code in page setting section missing <style> tags to make CSS works, you are pointing wrong style tag (blend??? - did you copy code from somewhere) than you have wrong layering. In my example I have included image in section it self to make blend mode work.

You can read more about how to use blend mode and its limitations
on CSS Tricks, getflywheel or logrocket but is more articles out there just find one that will suite you most.

[lecksus (Ryan Leckie)]

Ah that did the trick. Thank you so much @Stan !

[Stan (justAnotherDeveloper)]

hi @lecksus If you get a solution for your request feel free to close this issue.