hover effect

Basically it would look like the following:

.bne-gallery-masonry-wrapper .gallery-single:hover:after {
    content: "";
    position: absolute;
    top: 13px;
    left: 15px;
    right: 15px;
    bottom: 13px;
    background:red;
    z-index: 9;
}

You added a padding of 13/15 to the images on your site so the above reflects that. However, there is no caption included with the masonry grid so you won’t have text displayed over the color.

This is planned to be added in a later update but not in the near term.

Nothing, the content:”” is just required to use :before / :after in CSS. Since the masonry part of the gallery does not use the image caption, there won’t be any text overlaid

You would need to use nth-child rules. Which would allow you to cycle the colors after each one. For example:

.bne-gallery-masonry-wrapper .gallery-single:hover:after {
    content: "";
    position: absolute;
    top: 13px;
    left: 15px;
    right: 15px;
    bottom: 13px;
    z-index: 9;
}
.bne-gallery-masonry-wrapper .gallery-single:hover:nth-child(1n+1):after { background: red; }
.bne-gallery-masonry-wrapper .gallery-single:hover:nth-child(2n+1):after { background: blue; }
.bne-gallery-masonry-wrapper .gallery-single:hover:nth-child(3n+1):after { background: green; }

Well, the markup doesn’t include an “ID” for each image allowing you to target them specifically with the CSS. I’ll try about adding that in the next update that will go out shortly including being able to include captions on the overlay.

Hi, I’ve updated the plugin to v1.1 and included captions as an option for the masonry display. In the shortcode, set caption to true.

Example:
[gallery display="masonry" caption="true" ids="22,23,24,25,26,27,28,29"]

Now with the CSS, you can ignore most of what we discussed. The only items you would need is below.

.bne-gallery-masonry-wrapper .gallery-single.image-id-27 .caption-overlay { background: red; }
.bne-gallery-masonry-wrapper .gallery-single.image-id-22 .caption-overlay { background: green; }
.bne-gallery-masonry-wrapper .gallery-single.image-id-28 .caption-overlay { background: blue; }

Each image has a unique ID and is now in the HTML markup allowing you to target them specifically. So with the above, I’ve targeted the image with an ID of 27 to use a red background for the overlay, Image #22 with green, and Image #28 with blue.

You, of course, would set these to be different in the CSS. This will also allow you to display them in a random order and the IDs are unique to the image themselves.

Did you include caption="true" in the shortcode?

The original CSS that we had you won’t need anymore. Only what I mentioned here.

When displaying captions, you would set the text within the gallery image screen (not the media library). If the image does not have caption text then the overlay wont be there for that individual image.

If you’re comfortable, you can send me a login and I can take a look for you. You can send it privately on my website.