I want to fade an article's content to white to signify that further content can be unlocked. I can achieve this by adding an :after element with a white gradient.
But this techniques makes the text under the area under the gradient awkwardly unselectable and unresponsive to hover effects.
How can I produce a similar effect, and still let the user interact properly with the content underneath the gradient?
You can set
pointer-events: none on
More info and an example: https://css-tricks.com/almanac/properties/p/pointer-events/
Here's the codepen: http://codepen.io/zakkain/pen/dseHt used in aforementioned example.
I have also added a fiddle as an example: https://jsfiddle.net/quzoqone/4/