Mix-blend-mode: difference custom code not responding

Design help Custom code
1

Hi!

I’m currently doing some work on a portfolio website. There’s a certain effect I’m trying to recreate where the text inverts its colour depending on the background. I’ve seen it work using “mix-blend-mode: difference” in custom html code.

I’ve gotten it to function in safari, however chrome doesn’t seem to respond to the code on my site. I don’t think it’s a compatibility issue since this one does work: https://martijns-dynamite-project-1a4a24.webflow.io

Can’t find what I’m doing wrong, maybe a more seasoned developer can help me find a workaround?

Thanks in advance
Best
Martijn

Here is my site Read-Only: https://preview.webflow.com/preview/iml-e6128b?utm_medium=preview_link&utm_source=designer&utm_content=iml-e6128b&preview=4229b814fdaa994c7a182f7122259003&mode=preview

2

It looks like your embed element is targeting a hidden element (.logo instead of .logoblock) but you’ll also need to add a background color to your animation div block. I’m guessing this a requirement of the mix-blend-mode property—something I stumbled upon while testing your code on the live site.

Once I made those two adjustments, I see the reversed text that responds to the animated image as expected:

image

Just for reference, here’s the code I used in your embed element:

<style>
  .logoblock, .tabs {
    mix-blend-mode: difference;
  }
</style>
3

Hi Mikeyevin

Works like a charm, thank you so much for your help and time!

Thanks again
Best
Martijn

4

Hi, @mikeyevin!

I’m trying to achieve the same effect with the navbar on my website, but it doesn’t work. I have background color on the section element and on the body element too — it feels like mix-blend-mode wasn’t applied to my navbar for some reason.

Could I DM you my read-only link?

5

Of course, send it on over :+1:

6

Hi Mikey -

Trying to achieve the same effect on my site. After several hours of playing with code, I haven’t had any luck. Would you perhaps be able to take a look?

Many thanks

https://first-crack-1da0fb.webflow.io/