css - Fade text to transparent with functional links -

i have expandible panels long basic hmtl content (img, a, strong…) , want crop them max-height when they're collapsed fading content background color.

this how doing right (and correct visual result expect):

.collapsed {    max-height: 150px; /* magic number 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, <a href="#">consectetur adipiscing</a> 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. <a href="#">nulla vel porttitor lacus</a>. praesent malesuada varius sem @ ullamcorper. interdum et <a href="#">malesuada fames ac ante</a> 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. <a href="#">phasellus egestas</a> 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 @ 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 gravida. curabitur porta malesuada felis, @ tincidunt sapien finibus consequat. etiam @ viverra nisi, id dignissim est. integer eu felis id sem finibus congue.</p>  </div>

the problem method links aren't clickable because there's gradient glass (.collapsed::after) layer above real content.

i tried 2 approaches solve issue, neither of them acceptable me...

1. the first 1 bring links above glass. way, links clickable aren't affected gradient, , want them be.

.collapsed {    max-height: 150px; /* magic number 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%);  }    {    position: relative;    z-index: 1;  }

<div class="collapsed panel">    <p>lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> 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. <a href="#">nulla vel porttitor lacus</a>. praesent malesuada varius sem @ ullamcorper. interdum et <a href="#">malesuada fames ac ante</a> 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. <a href="#">phasellus egestas</a> 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 @ 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 gravida. curabitur porta malesuada felis, @ tincidunt sapien finibus consequat. etiam @ viverra nisi, id dignissim est. integer eu felis id sem finibus congue.</p>  </div>

2. the other method totally different approach, removing glass layer , applying gradient content itself:

.collapsed {    max-height: 150px; /* magic number 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;  }    {    color: blue;    text-decoration: underline;  }

<div class="collapsed panel">    <p>lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> 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. <a href="#">nulla vel porttitor lacus</a>. praesent malesuada varius sem @ ullamcorper. interdum et <a href="#">malesuada fames ac ante</a> 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. <a href="#">phasellus egestas</a> 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 @ 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 gravida. curabitur porta malesuada felis, @ tincidunt sapien finibus consequat. etiam @ viverra nisi, id dignissim est. integer eu felis id sem finibus congue.</p>  </div>

this method (besides being less compatible) removes styles links, , don't like/want either...

so, wonder if has come solution (the better if it's pure css).

add pointer-events: none; css style gradient element.

it works how sounds - gradient element no longer accept pointer events, fall through instead element below.

• browser support
• spec on mdn

.collapsed {    max-height: 150px; /* magic number 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, <a href="#">consectetur adipiscing</a> 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. <a href="#">nulla vel porttitor lacus</a>. praesent malesuada varius sem @ ullamcorper. interdum et <a href="#">malesuada fames ac ante</a> 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. <a href="#">phasellus egestas</a> 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 @ 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 gravida. curabitur porta malesuada felis, @ tincidunt sapien finibus consequat. etiam @ viverra nisi, id dignissim est. integer eu felis id sem finibus congue.</p>  </div>