7.1 Gallery Image: overlay and caption on hover

Site URL: http://www.maggiebrz.design

Hi everyone! 

I just switched from 7.0 to 7.1.  In the masonry gallery grid, I'm trying to add hover effects to my images- a color overlay and image caption on hover. I talked to customer support, and they told me that 7.1 doesn't support gallery hovers.  I'm having trouble with the code, and was wondering if anyone had more luck than I did? 

I've attached a screen shot of how the site is set up. I'm trying to keep the full-bleed effect.

I've been stuck in a rabbit hole working on this all day - thanks for the help!!

First, enable Caption & add some demo captions

Next, let me know

Then we will give the code to create effect.

Done!

You mean effect like this? (pass: abc)

Yes, exactly like that! I tweaked the site layout a bit, but it's the same overlay goal. 

I'd love to change the color of the overlay if possible as well.

Add to Page Settings > Advanced > Header

<style>
figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: #f4f6ea; /* Overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
</style>

1 hour ago, tuanphan said:

Add to Page Settings > Advanced > Header

<style>
figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: #f4f6ea; /* Overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
</style>

 

Is there any way to add the code to the overall CSS so that I don't have to upgrade (individual page CSS requires business plan)? If not, totally fine, it's worth it!  Thank you so much!

21 hours ago, maggierae said:

Is there any way to add the code to the overall CSS so that I don't have to upgrade (individual page CSS requires business plan)? If not, totally fine, it's worth it!  Thank you so much!

With Personal Plan > Edit Page > Add Code Block > Paste above code

Sorry to be a bother Tuanphan! For some reason I'm having a bit of trouble with it still. When I set the code type to HTML and CSS, the hover doesn't show up. Any ideas? 

I have the code type set to HTML currently just so you can see it, in case that helps.

@tuanphan Thank you so much for this code!  It worked great!  However, do you happen to have an extra snippet that I can add that would allow the captions to still show when the image is lightboxed? 

On 5/26/2021 at 11:07 PM, jenmaherconsulting said:

@tuanphan Thank you so much for this code!  It worked great!  However, do you happen to have an extra snippet that I can add that would allow the captions to still show when the image is lightboxed? 

 

Use this code

@tuanphan for some reason when I use this code, the overlay effect doesn't show up. The caption seems to be working fine. Any ideas? 

https://fish-nectarine-wbzr.squarespace.com/video-test

pw: c?yNhS8>vmJd`YMA

On 6/8/2021 at 5:03 AM, Swharton24 said:

@tuanphan for some reason when I use this code, the overlay effect doesn't show up. The caption seems to be working fine. Any ideas? 

https://fish-nectarine-wbzr.squarespace.com/video-test

pw: c?yNhS8>vmJd`YMA

Hi. I see overlay here

@tuanphan Hi,  I used your code however, the overlay color doesnt show up. The caption seems to be working tho. Do you know whats the problem? 

https://www.unswaseanconference.com/about-asean-2021-v2

On 8/10/2021 at 1:09 AM, Will123 said:

@tuanphan Hi,  I used your code however, the overlay color doesnt show up. The caption seems to be working tho. Do you know whats the problem? 

https://www.unswaseanconference.com/about-asean-2021-v2

Hi. Where is gallery? I don't see on this page

Hi does this work on Brine?

https://garlic-lemon-cxe4.squarespace.com/ pass: conway.tv

17 hours ago, cpal said:

Hi does this work on Brine?

 

https://garlic-lemon-cxe4.squarespace.com/ pass: conway.tv

Hi. Where is gallery on your site?

Hi Tuan,

It's the gallery of all the channels, on the home page

Hi @tuanphan,

Apologies for digging up an old post, i've been using our code for a while now with no issues, but it's suddenly started displaying all the captions even when not overlayed.

I haven't done anything to cause this to my knowledge.

https://www.tomcharlesworthillustration.co.uk/

Is there an easy fix?

Thanks.

On 11/18/2021 at 1:10 AM, TomCharlesworth said:

Hi @tuanphan,

Apologies for digging up an old post, i've been using our code for a while now with no issues, but it's suddenly started displaying all the captions even when not overlayed.

I haven't done anything to cause this to my knowledge.

https://www.tomcharlesworthillustration.co.uk/

Is there an easy fix?

Thanks.

Hi,

I see title/overlay here?

Hi taunphan! This code is amazing, and I know I'm late to this party.

Is there a way to change the color of the caption text? The overlay and caption both work great, but the caption is currently black and I'd love for it to be a different color.

Also, any image I've added after I put in the code, the caption shows up, but not the overlay hover...any ideas how to fix?

Thanks!

On 2/4/2022 at 12:12 AM, agtrymus said:

Hi taunphan! This code is amazing, and I know I'm late to this party.

Is there a way to change the color of the caption text? The overlay and caption both work great, but the caption is currently black and I'd love for it to be a different color.

Also, any image I've added after I put in the code, the caption shows up, but not the overlay hover...any ideas how to fix?

Thanks!

#1. Add this before </style>

.gallery-caption-content * {
	color: red !important;
}

#2. Can you share link to your site? We can check your case easier

Hey @tuanphan 🙂 Thanks so much for providing this code!

If possible I would love some help please as no matter what I do I can't seem to get this code to work for the gallery on the home page. I've tried to include it in a few places but it won't work and thus I can't achieve the centred, overlaid hover captions I desire. 

Any advice would be greatly appreciated!! https://pelican-fennel-8p7z.squarespace.com/

Thanks!

On 2/22/2022 at 9:37 AM, kiaraminette said:

Hey @tuanphan 🙂 Thanks so much for providing this code!

If possible I would love some help please as no matter what I do I can't seem to get this code to work for the gallery on the home page. I've tried to include it in a few places but it won't work and thus I can't achieve the centred, overlaid hover captions I desire. 

Any advice would be greatly appreciated!! https://pelican-fennel-8p7z.squarespace.com/

Thanks!

Your site is private. You can setup password & share url again. We can check easier

Hello @tuanphan, I would like to use 

On 8/17/2020 at 10:21 AM, tuanphan said:

Add to Page Settings > Advanced > Header

<style>
figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: #f4f6ea; /* Overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
</style>

 

Hello @tuanphan, I would like to use this code but on the "slideshow: reel" gallery type instead. Would you happen to be able to provide a version of the code that would work for this? :)