How to omit an element from parent mix-blend mode (difference)

bobbyxbones · April 5, 2023, 4:06pm

Hi all,

I am looking to omit/exclude an element (brand logo) from a parent div (Navigation) mix-blend mode.
In order to get the difference blend mode to work I had to apply it to the parent nav div, which in turn makes the brand logo follow the same blend mode.

I need everything inside the nav — except the brand logo — to have a mix-blend mode of difference, while the brand logo stays ‘normal’

Is there a way to mask/exclude the brand logo from the parent blend mode?

Here is my site Read-Only: Webflow - Mix-Blend Mode Test

bobbyxbones · April 5, 2023, 4:20pm

After reading some other threads I decided to pull the brand-logo out of the Navigation div and into its own div with a set background colour.

This helps to omit from the original blend-mode issue, however the desired affect would be for the blend mode to only change the white-to-black and black-to-white on the logo only so that a background div is not required.

This would keep (for example) the blue of the logo but changed the white and blacks on blend. Is there a way to do this with custom css?