Hi, I wonder if anyone can help me. I’ve created a Mondrian style layout using CSS Grid. I have a heading that has been rotated to be vertical that spans a couple of rows and is sticky. I’d like to achieve an effect that when a horizontal black line passes over the black text the text that is covered by the line is white.
I think I need to use mix-blend-mode. But so far I’ve not had any luck with my experiments. I’m not sure if it’s maybe an issue as the horizontal bar is a sibling to the outer wrapper and not nested. I’m also wondering if I need to fake the horizontal line with a linear-gradient as the background to make it more image like, though I’ve failed on that count too!
I’ve made a pen for more clarity: https://codepen.io/TomCheckley/pen/rNJNpBG?editors=1101
Any help would be much appreciated. Thanks,
Tom