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

[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!

[David]

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%); 
}

[Joshua]

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

[David]

You’re welcome

[Author]

Posts