Archived topic
How to create a color overlay over post featured images in archives
3 replies · Started by Joshua on August 9, 2020
Viewing posts 1–4 of 4
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!
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%);
}Perfect! Exactly what I was looking for. Thank you so much David, as always!
You're welcome
This archived topic is closed to new replies.
