[Resolved] How to create a color overlay over post featured images in archives

Home Forums Support How to create a color overlay over post featured images in archives

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1394680
    Joshua

    Hi,

    I tried finding a solution first, but couldn’t find one.

    I’m trying to add a dark overlay over the featured images on this page. I tried playing around with pseudo elements, but still couldn’t find the right solution.

    The page is here: https://joshuamayo.com/guide/stock-market-guide/

    Ideally, I’d like for the overlay to be a linear gradient, more transparent at the top but darker as it gets to the bottom where the text is. Something like this perhaps:

    linear-gradient(0deg, rgb(0 0 0 / 90%) 0%, rgb(0 0 0 / 15%) 50%);

    Any ideas? Thanks GP team!

    #1395051
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    body:not(.single) .inside-article .post-image {
        position: relative;
    }
    
    body:not(.single) .inside-article .post-image:before {
        position: absolute;
        content: '';
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 8px;
        background-image: linear-gradient(0deg, rgb(0 0 0 / 90%) 0%, rgb(0 0 0 / 15%) 50%); 
    }
    #1395612
    Joshua

    Perfect! Exactly what I was looking for. Thank you so much David, as always!

    #1395623
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.