Mix-blend-mode with SVG

[hyperdrive_boom]

Good afternoon,

I am trying to add mix-blend-mode to my SVG logo so when you scroll it will change from black to white as you reach different coloured backgrounds AKA like:

Dynamic color change while scrolling with CSS

I have inserted my SVG in the header like so:

<img src="https://WEBSITE/staging/8688/wp-content/uploads/2024/07/Logo.svg" class="Logo" role="img" />

and added the following CSS:

.Logo {
  color: white;
  width: 96px;
  mix-blend-mode: difference;
}

The SVG displays but stays white when I scroll no matter what the background colour - please advise

Thank you!
Jason

[marc_a]

Hey Jason,

Thanks for reaching out!

Would you mind sharing the page URL so that we can check your setup properly? It would also be best if you could share with us your admin credentials. To do that, please give us the following information in a Secure Note.

• WordPress Login URL
• Admin level username and password
• Page URL in question

You can find the Secure Note button at the bottom of your posts.

Thank you.