How to make fade-out text as screen width decreases

[LolaB]

Hi everyone!

I was wondering if someone could help me recreate the effect that you can see on this page: https://www.penguin.co.uk/search/?charset=UTF-8&q=

You can see that the book description goes on for much longer than is actually visible, but that at after certain point the text fades out. This point has a consistent length that is maintained while the screen increases/decreases in size.

Is it possible for me to do the same sort of thing on my website using CSS?

Thank you for your help,
Lola

[Beverleyh]

Have you tried inspecting that page/area with the developer console? F12 in most browsers. You’ll be able to see exactly how they’ve done it and take your cues from there.

Off the top of my head (I’m on mobile), you could position a pseudo element at the bottom of the text container (higher z-index so it sits over the text), and give it a linear gradient, from transparent to whatever colour matches your background.

More info about pseudo elements https://css-tricks.com/almanac/selectors/a/after-and-before/ and linear gradients https://css-tricks.com/snippets/css/css-linear-gradient/

[Shikkediel]

It’s a semi transparent image that’s been put over the text:

codepen.io/anon/pen/RjxyKG

Edit – had not seen Beverleyh’s response. A gradient would be nicer indeed (although that’s not what is used on the reference site).

[Author]

Posts