Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 14, 2024 at 11:07 pm #1430098
    imagestudios

    Ideally, I am wanting the Masonry Gallery images to appear as grayscale and then have a dark blue overlay—something like rgba(0,87,130,.7) when you rollover the images. All the threads I’m seeing are from around 2017 and don’t seem to address the current coding of the Masonry Gallery as nothing seems to work. Thanks for your help!

    January 15, 2024 at 5:38 am #1430105
    Ismael

    Hey imagestudios,

    Thank you for the inquiry.

    Looks like you’ve managed to apply gray scaling to the masonry items with this css code.

    #top .av-hover-overlay-grayscale .av-masonry-entry .av-masonry-image-container {
    filter: grayscale(1);
}

    To adjust the overlay color, try this css code.

    #top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content {
    background: rgba(0,87,130,0.3);
}

    Best regards,
    Ismael

    January 15, 2024 at 5:40 am #1430106
    Ismael

    Hi,

    UPDATE: You can also apply the grayscale effect by adjusting the Advanced > Animation > Image Hover Effect settings.

    Best regards,
    Ismael

    January 15, 2024 at 4:42 pm #1430175
    imagestudios

    Thank you. I’ve been able to achieve this, but I want the color overlay to disappear on hover.

    January 16, 2024 at 10:40 am #1430221
    Ismael

    Hi,

    Thank you for the update.

    You can add this css code to hide the overlay on hover.

    #top .av-caption-style-overlay .av-masonry-item-with-image:hover .av-inner-masonry-content {
    background: transparent;
}

    Best regards,
    Ismael

    January 19, 2024 at 9:44 pm #1431523
    imagestudios

    That worked—thanks again for the great support!

    January 20, 2024 at 9:29 am #1431534
    Rikard

    Hi,

    Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

    January 20, 2024 at 2:30 pm #1431559
    imagestudios

    You can close this topic. Thank you.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Add and change color overlay for Masonry Gallery’ is closed to new replies.