[Resolved] Gradient as css class over cover

[Heiko St.]

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

[David]

Hi there,

can you share a link to the page, and let me know what ‘container’ you want the gradient applied to ?

[Heiko St.]

Hi,

I put the link into the private notes.

Thank you in advance.
Heiko

[David]

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.

[Heiko St.]

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

[David]

Willing to give this a try ?

[Heiko St.]

Hi,

this is not what I thought about, but I’ll give it a try.

Thanks for the video.

Heiko

[David]

Let us know how you get on. If need be ill try figure out how to add CSS to the Cover Block.

[Heiko St.]

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

[David]

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

[Heiko St.]

This is perfect and exactly what I want and could not do myself.

A BIG THANK YOU !!

[David]

Glad to be of help!

[Author]

Posts