zxz zxz - 1 month ago 5x
CSS Question

Fade text to white without hindering hover and selection

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 :after 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/