Fade text to transparent with functional links - css

Question

I have some expandible panels with long basic HMTL content (img, a, strong…) and I want to crop them to a certain max-height when they're collapsed fading the content to background color.
This is how am doing it right now (and also the correct visual result I expect):
.collapsed {
max-height: 150px; /* Magic number for demo purposes */
overflow: hidden;
position: relative;
}
.collapsed::after { /* Gradient glass layer */
display: block;
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%);
}
<div class="collapsed panel">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur augue ut ligula tincidunt, vitae suscipit est aliquam. Vivamus ut efficitur odio. Donec non velit sit amet odio aliquam tempus.</p>
<p>Vestibulum luctus eros eu ligula sodales rhoncus. Nulla vel porttitor lacus. Praesent malesuada varius sem at ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce gravida pulvinar dapibus. Nam faucibus diam non nulla fermentum, in aliquam augue dictum. Maecenas sed lorem bibendum, tincidunt quam ut, vulputate quam.</p>
<p>Maecenas malesuada eros ipsum, vel pellentesque ante consequat vitae. Phasellus egestas aliquet felis, id condimentum neque fermentum a. Nunc porta viverra libero sit amet viverra. Ut consectetur ac ex in egestas. Integer vitae nulla faucibus, pulvinar felis eu, placerat nibh.</p>
<p>Morbi semper vel odio et blandit. Proin blandit magna at euismod egestas. Suspendisse laoreet arcu tortor, vel efficitur nulla malesuada nec. Etiam porttitor lacus sit amet magna tempor, non interdum nisl iaculis. Etiam quis porta orci. Quisque sit amet lectus ac neque accumsan luctus. Donec luctus, ipsum id elementum rutrum, diam ipsum fringilla velit, quis posuere lacus tortor nec quam. Phasellus ultricies enim quis turpis varius, scelerisque ultricies nisi rutrum. Sed dapibus malesuada sapien a gravida. Curabitur porta malesuada felis, at tincidunt sapien finibus consequat. Etiam at viverra nisi, id dignissim est. Integer eu felis id sem finibus congue.</p>
</div>
The problem with this method is that links aren't clickable because there's this gradient glass (.collapsed::after) layer above the real content.
I tried two approaches to solve this issue, but neither of them is acceptable to me...
The first one is to bring links above the glass. This way, links are clickable but they aren't affected by the gradient, and I want them to be.
.collapsed {
max-height: 150px; /* Magic number for demo purposes */
overflow: hidden;
position: relative;
}
.collapsed::after { /* Gradient glass layer */
display: block;
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%);
}
a {
position: relative;
z-index: 1;
}
<div class="collapsed panel">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur augue ut ligula tincidunt, vitae suscipit est aliquam. Vivamus ut efficitur odio. Donec non velit sit amet odio aliquam tempus.</p>
<p>Vestibulum luctus eros eu ligula sodales rhoncus. Nulla vel porttitor lacus. Praesent malesuada varius sem at ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce gravida pulvinar dapibus. Nam faucibus diam non nulla fermentum, in aliquam augue dictum. Maecenas sed lorem bibendum, tincidunt quam ut, vulputate quam.</p>
<p>Maecenas malesuada eros ipsum, vel pellentesque ante consequat vitae. Phasellus egestas aliquet felis, id condimentum neque fermentum a. Nunc porta viverra libero sit amet viverra. Ut consectetur ac ex in egestas. Integer vitae nulla faucibus, pulvinar felis eu, placerat nibh.</p>
<p>Morbi semper vel odio et blandit. Proin blandit magna at euismod egestas. Suspendisse laoreet arcu tortor, vel efficitur nulla malesuada nec. Etiam porttitor lacus sit amet magna tempor, non interdum nisl iaculis. Etiam quis porta orci. Quisque sit amet lectus ac neque accumsan luctus. Donec luctus, ipsum id elementum rutrum, diam ipsum fringilla velit, quis posuere lacus tortor nec quam. Phasellus ultricies enim quis turpis varius, scelerisque ultricies nisi rutrum. Sed dapibus malesuada sapien a gravida. Curabitur porta malesuada felis, at tincidunt sapien finibus consequat. Etiam at viverra nisi, id dignissim est. Integer eu felis id sem finibus congue.</p>
</div>
The other method is a totally different approach, removing the glass layer and applying a gradient to the content itself:
.collapsed {
max-height: 150px; /* Magic number for demo purposes */
overflow: hidden;
background: linear-gradient(180deg, rgba(0,0,0,1) 20%, rgba(255,255,255,0) 95%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
a {
color: blue;
text-decoration: underline;
}
<div class="collapsed panel">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur augue ut ligula tincidunt, vitae suscipit est aliquam. Vivamus ut efficitur odio. Donec non velit sit amet odio aliquam tempus.</p>
<p>Vestibulum luctus eros eu ligula sodales rhoncus. Nulla vel porttitor lacus. Praesent malesuada varius sem at ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce gravida pulvinar dapibus. Nam faucibus diam non nulla fermentum, in aliquam augue dictum. Maecenas sed lorem bibendum, tincidunt quam ut, vulputate quam.</p>
<p>Maecenas malesuada eros ipsum, vel pellentesque ante consequat vitae. Phasellus egestas aliquet felis, id condimentum neque fermentum a. Nunc porta viverra libero sit amet viverra. Ut consectetur ac ex in egestas. Integer vitae nulla faucibus, pulvinar felis eu, placerat nibh.</p>
<p>Morbi semper vel odio et blandit. Proin blandit magna at euismod egestas. Suspendisse laoreet arcu tortor, vel efficitur nulla malesuada nec. Etiam porttitor lacus sit amet magna tempor, non interdum nisl iaculis. Etiam quis porta orci. Quisque sit amet lectus ac neque accumsan luctus. Donec luctus, ipsum id elementum rutrum, diam ipsum fringilla velit, quis posuere lacus tortor nec quam. Phasellus ultricies enim quis turpis varius, scelerisque ultricies nisi rutrum. Sed dapibus malesuada sapien a gravida. Curabitur porta malesuada felis, at tincidunt sapien finibus consequat. Etiam at viverra nisi, id dignissim est. Integer eu felis id sem finibus congue.</p>
</div>
This method (besides being less compatible) removes styles from links, and I don't like/want that either...
So, I wonder if anyone has come up with a good solution for this (the better if it's pure CSS).

Answer 1

Add the pointer-events: none; CSS style to your gradient element.
It works exactly how it sounds - the gradient element will no longer accept pointer events, they will fall through instead to the element below.
Browser Support
Spec on MDN
.collapsed {
max-height: 150px; /* Magic number for demo purposes */
overflow: hidden;
position: relative;
}
.collapsed::after { /* Gradient glass layer */
display: block;
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%);
pointer-events: none;
}
<div class="collapsed panel">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur augue ut ligula tincidunt, vitae suscipit est aliquam. Vivamus ut efficitur odio. Donec non velit sit amet odio aliquam tempus.</p>
<p>Vestibulum luctus eros eu ligula sodales rhoncus. Nulla vel porttitor lacus. Praesent malesuada varius sem at ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce gravida pulvinar dapibus. Nam faucibus diam non nulla fermentum, in aliquam augue dictum. Maecenas sed lorem bibendum, tincidunt quam ut, vulputate quam.</p>
<p>Maecenas malesuada eros ipsum, vel pellentesque ante consequat vitae. Phasellus egestas aliquet felis, id condimentum neque fermentum a. Nunc porta viverra libero sit amet viverra. Ut consectetur ac ex in egestas. Integer vitae nulla faucibus, pulvinar felis eu, placerat nibh.</p>
<p>Morbi semper vel odio et blandit. Proin blandit magna at euismod egestas. Suspendisse laoreet arcu tortor, vel efficitur nulla malesuada nec. Etiam porttitor lacus sit amet magna tempor, non interdum nisl iaculis. Etiam quis porta orci. Quisque sit amet lectus ac neque accumsan luctus. Donec luctus, ipsum id elementum rutrum, diam ipsum fringilla velit, quis posuere lacus tortor nec quam. Phasellus ultricies enim quis turpis varius, scelerisque ultricies nisi rutrum. Sed dapibus malesuada sapien a gravida. Curabitur porta malesuada felis, at tincidunt sapien finibus consequat. Etiam at viverra nisi, id dignissim est. Integer eu felis id sem finibus congue.</p>
</div>