I am trying to create an effect of content fading into a header element.
Here is a fiddle: http://jsfiddle.net/jdesilvio/kthPT/105/
If you look at the result and scroll, you can see the effect I am trying to achieve. If you look closer at the HTML and CSS you will see that there should be an h4 element and a border, but since they are set to color: gray; they are invisible.
I have tried using other values for mix-blend-mode as well as various configurations of background: linear-gradient(gray 100px, transparent); Noting has worked.
My current implementation can obviously result in unwanted side-effects, not to mention that I can never use gray as a color. How can I get around this issue? Or am I out of luck, if so, are there any alternative methods for achieving this effect?