Tagged: , , , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 5, 2017 at 2:21 pm #816740
    Rio1

    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

    July 5, 2017 at 2:25 pm #816742
    Yigit

    Hey,

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

    Cheers!
    Yigit

    July 5, 2017 at 2:41 pm #816748
    Rio1

    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)

    July 5, 2017 at 3:08 pm #816762
    Yigit

    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

    July 5, 2017 at 3:35 pm #816771
    Rio1

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

    July 5, 2017 at 4:20 pm #816796
    Yigit

    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

    July 5, 2017 at 4:43 pm #816810
    Rio1

    great,

    what about for the images of a masonry galery?

    July 6, 2017 at 2:29 pm #817271
    Yigit

    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

    February 13, 2020 at 5:22 pm #1184222
    jannnnnneke

    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

    February 15, 2020 at 5:36 am #1184645
    Rikard

    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

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.