[Resolved] Gradient as css class over cover

Home Forums Support [Resolved] Gradient as css class over cover

Home Forums Support Gradient as css class over cover

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1989406
    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

    #1989774
    David
    Staff
    Customer Support

    Hi there,

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

    #1989961
    Heiko St.

    Hi,

    I put the link into the private notes.

    Thank you in advance.
    Heiko

    #1990032
    David
    Staff
    Customer Support

    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.

    #1990039
    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

    #1990164
    David
    Staff
    Customer Support

    Willing to give this a try ?

    #1990169
    Heiko St.

    Hi,

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

    Thanks for the video.

    Heiko

    #1990208
    David
    Staff
    Customer Support

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

    #1990214
    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

    #1990227
    David
    Staff
    Customer Support

    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;
    }
    #1990228
    Heiko St.

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

    A BIG THANK YOU !!

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