Tagged: , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 1, 2022 at 8:58 pm #1370978
    nV15OoBtg21iTn5z

    Is there a way to add a slight opacity color overlay to the preview image on the masonry grid? This way it is easier to read the text on top of it.

    Please see the masonry grid at the bottom of the page specified.

    November 2, 2022 at 5:16 am #1371017
    Ismael

    Hey nV15OoBtg21iTn5z,

    Thank you for the inquiry.

    You can use this css code to add an overlay above the masonry images to make the caption more readable.

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

    You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

    Best regards,
    Ismael

    November 2, 2022 at 3:36 pm #1371074
    nV15OoBtg21iTn5z

    Thank you, Ismael!

    If anyone else needs it, I’ve combined your code with that from another thread — so by default, there is a slight opacity on the image with white text on the overlay… and then on hover, that turns black with white text.

    /* Masonry grid overlay. */
#top .av-caption-style-overlay.av-hover-overlay- .av-masonry-item-with-image .av-inner-masonry-content {background: rgba(0,0,0,0.5);}
#top .av-inner-masonry-content-pos-content .av-masonry-entry-title {color: white;}
#top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content:hover {background: rgba(0,0,0,1);}
    November 3, 2022 at 3:26 am #1371172
    Ismael

    Hi,

    Happy to know that the suggestion is working. Please do not hesitate to open another thread if you have more questions about the theme.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Masonry Grid Image Overlay’ is closed to new replies.