Seeking assistance on a Mondrian-style CSS Grid layout with a rotated sticky heading. Looking to achieve a visual effect where intersecting text turns white when a black horizontal line passes over or under it.
https://i.sstatic.net/YQaxV.png
Considering the use of mix-blend-mode, but unsuccessful so far. Contemplating using a linear-gradient as a background to mimic an image, yet facing challenges with this as well!
Sharing a jsfiddle below for further clarification:
Any advice or guidance would be highly appreciated. Thank you.
Reviewed this related answer Change color of text when scrolling over/under another element?, although it involves different color combinations in the blend mode.
/* CSS code snippet */
/* HTML code snippet */