Archived topic
Gradient as css class over cover
11 replies · Started by Heiko St. on November 3, 2021
Hi,
I have a container with a grid. In this grid are container. There are cover images with a text. I know that there are options for gradient adding, but I don't want this to do for every image in the grid.
So I try to add a new css class with the gradient, but it seems that it is only behind the cover. I need it in front of the cover and behind the text.
.team {
background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 85%,rgb(0,0,0) 100%);
}
Thank you,
Heiko
Hi there,
can you share a link to the page, and let me know what 'container' you want the gradient applied to ?
Hi,
I put the link into the private notes.
Thank you in advance.
Heiko
Why not add the Image to the Background of the GB Grid items container block?
You can then set a Gradient background as a pseudo element to overlay the image.
Hi,
I tried this but as a result the image is much higher and I have to add the text manually. On top must I set the gradient manually too, if I understood you right.
Is there a possibility to do the gradient in a extra css class, like I tried?
Heiko
Willing to give this a try ?
Hi,
this is not what I thought about, but I'll give it a try.
Thanks for the video.
Heiko
Let us know how you get on. If need be ill try figure out how to add CSS to the Cover Block.
Hi,
I tried it but as I mentioned, it is not what I think.
If you can figure out how to add CSS to the Cover Block ... :-) This will be nice!
Heiko
Try this:
.team .wp-block-cover__inner-container:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 85%,rgb(0,0,0) 100%);
z-index: -1;
}This is perfect and exactly what I want and could not do myself.
A BIG THANK YOU !!
Glad to be of help!
