Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #816740

    Hi Kriesi team,

    I was wondering how I can have an image overlay that changes color.
    prettey much like the main picutre on this site: https://www.democrats.org/

    I tried to just insert this. linear-gradient(135deg,rgba(0,174,243,.7),rgba(255,221,0,.7));

    but it didn’t work. Do you have a hint?

    thank you

    #816742

    Hey,

    Can you please post a link to your page? :)

    Cheers!
    Yigit

    #816748

    Hi Yigit,
    thanks for the quick response.

    i haven’t started the page yet but I was planing on doing it as an overlay of a slider or a colored section.
    but as an example this page can serve (see private content section)

    #816762

    Hi,

    For Color Sections, you can simply add overlay to your section and then add following code to Quick CSS

    #newsletter .av-section-color-overlay {
        background: linear-gradient(135deg,rgba(0,174,243,.7),rgba(255,221,0,.7));
    }

    This is for newsletter section :)

    Best regards,
    Yigit

    #816771

    thank you.
    how do I adress that for a specific media element (slider or color section)?
    just declare an id like “specialOverlay”
    and then put this into quick css?
    #specialOverlay .av-section-color-overlay {
    background: linear-gradient(135deg,rgba(0,174,243,.7),rgba(255,221,0,.7));
    }

    #816796

    Hi,

    Yes, that would work for Color Section elements and if you would like to apply it to image elements with centered overlay caption, you can use following code

    .av-caption-image-overlay-bg {
        background: linear-gradient(135deg,rgba(0,174,243,.7),rgba(255,221,0,.7));
    }

    Best regards,
    Yigit

    #816810

    great,

    what about for the images of a masonry galery?

    #817271

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    #top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content {
        background: linear-gradient(135deg,rgba(0,174,243,.7),rgba(255,221,0,.7));
    }
    

    Best regards,
    Yigit

    #1184222

    Hi! I want to change the color of image post slider overlay, but the overlay is bigger than the image so the overlay is a little bit to wide. Any ideas how to fix that? See: https://ibb.co/ZHJNFgT

    Thanks! Janneke

    #1184645

    Hi Janneke,

    Thanks for the screenshot, could you post a link to where we can see the actual element as well? If you want to change the overlay on linked images then you can do so under Enfold->Advanced Styling.

    Best regards,
    Rikard

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.