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.

perfect, thank you!
what kind of content should i insert inside the code?
and should i have to do this for every gallery image?

(i’m sorry for the extreme dumb questions)

thanks again

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

ok, thank you!

i’ve tried the css you made but this made every image with red hover effect, how can i make them different? every image with a different color?

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

ok, almoust there!
one last thing, images are randomly ordered, so i can’t control hover color over them (i’d like specific color over specific image)…is there a way to use this effect but “fixed” on single item?

• This reply was modified 7 years, 4 months ago by ppauloff.

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.

ok, no problem!
i think i’ll wait for the next one ??

thanks again, you good man!

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.

you really great man, thank you very very much!

unfortunately seems not to work, i’ve added the caption to the gallery text, these codes on the css (with the correct image id) but nothing changed
(i’m really sorry to annoy you, but i feel we’re almoust there!)

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

yes i did, also tried to change this

.bne-gallery-masonry-wrapper .gallery-single:hover:after {

to .gallery-single.image

but it doesn’t work!

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.

no, it works!
wow, thank you very very much man, can’t say how much you’ve done for me, thanks a lot!

??

one real last thing…i’m custimizing the hover, and using the code you sent before the uprage it perfectly fits, but it has sort of “bottom margin”… i mean the hover exactly covers the image, but has an abundance on the bottom and i can’t fix it, even adjusting the 13-15px margin

• This reply was modified 7 years, 4 months ago by ppauloff.

and moreover you can’t click on them