Streaming live at 10am (PST)

Mix-blend-mode: difference custom code not responding

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

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>
1 Like

Hi Mikeyevin

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

Thanks again
Best
Martijn