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:
For reference, here’s the code I added to your HTML Embed element:
Amazing, thank you so much Mike! It’s working 
Hello, I am trying to do a similar thing. I have an embedded SVG in my Nav that I’ve applied mix-blend-mode: difference to. I have the background of the body, and other parent elements set to white. Can’t figure out what the blend mode isn’t working:
You need to make the change on the parent container, not the embed element. Moving the mix-blend-mode: difference to the navbar class enables the effect:
Thanks so much, I could have sworn I tried that…but it did work!
Hi there, i have a similar problem with the “mix-blend-mode: difference” effect.
I created a fixed bar with textfilds in side wich lay on top of collection lists elements (slides), as i really like the effect and also will have a black layover (when clicking on /info) i need it to, so the text will be white when the black background lays over.
however i read this discussion which brought me closest, but still it won’t work, as my situation might be a little different from yours!?
Anyways, i would be happy if you could take a look at my link and maybe figure out what i am missing/doing wrong here?
Thanks in advance!
Hey @mikeyevin - I’ve been trying for hours to achieve the same effect. Any possibility you can take a look? Im sure you could Figure out whats wrong in minutes.
Many thanks,
Brian
Hi Mike,
I want to make the link block 3 on my home page invert colors on hover but i can’t make it work.
I don’t know if it’s even possible.
Here’s the link to view my site.
https://preview.webflow.com/preview/atl-agence-creative?utm_medium=preview_link&utm_source=designer&utm_content=atl-agence-creative&preview=9d34e63d608f41fd268690d9b9e49e39&workflow=preview
