Using CSS to create a faded read more link

tom Tom, 1st December 2015

Whilst using Trello recently I noticed a nice little CSS fade effect. We often have 'read more' links on long paragraphs of text which, once clicked on, reveals the entire body of text. This can be really handy with user interfaces when you don't want to overload the screen with information, but you want to let the user know there is more information to see if they choose to. Trello achieve this really nicely, using CSS to fade the paragraph at the bottom, then offering a link to click to reveal the whole content.

I've created a little stand-alone demo of this effect here. Feel free to have a play around.

More from our blog

18a win Netty 2024 award for Activibees.com

18a win Netty 2024 award for Activibees.com

29.02.24

We are delighted to announce that 18a has been recognised for its outstanding work in the "Web Design Agency of the Year - UK" category at… Read →

Generating an Effective Content Security Policy with your Laravel React App

Generating an Effective Content Security Policy with your Laravel React App

27.02.24

I recently had an interesting problem to solve. I'd built a brand new author website on a shiny installation of Laravel 10, utilising its out-of-the-box… Read →

If your WordPress website looks broken, it could be because of this.

If your WordPress website looks broken, it could be because of this.

15.02.24

WordPress is the incredibly popular blogging-come-full-website platform that powers over 835 million websites* in 2024. It's functionality is extended by plugins, and one such very… Read →