Forums

Give help. Get help.

  • # November 18, 2017 at 9:57 am

    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

    # November 19, 2017 at 1:22 am

    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/

    # November 19, 2017 at 1:32 am

    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).

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag