Streaming live at 10am (PST)

Mix-blend-mode not working

Hello!

I’m trying to make my fixed menu (on the L and R) invert colours when it scrolls over over sections and their images. I have tried using custom code:

But it’s not working.

I’m not sure what I’m doing wrong here?


Here is my site Read-Only: https://preview.webflow.com/preview/bp-rg-test?utm_medium=preview_link&utm_source=designer&utm_content=bp-rg-test&preview=9336cb3f4db29b78374de89a80f542b1&pageId=5f4c933f8b5cc2d02d0c5090&mode=preview
(how to share your site Read-Only link)

In order for the mix-blend-mode style to work, you need to have a background color set for your main container element—even if you’re using an image over top of it.

Once I set the background color of the .d-product-grid div to white and applied the code within an embed element, I was able to see the effect:

image

For reference, here’s the code I added to your HTML Embed element:

image

Amazing, thank you so much Mike! It’s working :slight_smile: