Gallery Captions HOVER Squarespace 7.1 Please help!

Site URL: https://terrier-pelican-7hsm.squarespace.com

Hey, would love some help please!

I'm pretty new to Squarespace, and am trying to get my captions to hover over my images in a masonry gallery. I've been researching, and seems Squarespace 7.1 has only just allowed captions with galleries? I've used the below code, and the captions do appear. However, I really want the captions to be as a hover option over the image. Does anyone know how to do this?

I've attached a screen shot of how the captions are currently showing on images.

Been driving me crazy and would love some advice! Thank you! 

x

figcaption.gallery-caption.gallery-caption-grid-masonry  {
    position: absolute;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    color: white;
    left: 0;
    text-align: center;
  img:hover
}

Hi Pandagal

Your site is not accessible

@Pandagal Is this the effect you're after? If so this could should get you started

 

/* Add this code to Design -> Custom CSS */

.gallery-caption {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 102%;
    text-align:center;
    opacity: 0;
    transition: all .3s ease;
    background-color: white;
    height: 100%;
}

.gallery-masonry-item:hover .gallery-caption {
    opacity: 1;
    transition: all .3s ease;
}

.gallery-caption-wrapper {
    display: flex;
    place-items: center;
    justify-content: center;
}

This is brilliant! Thank you so much. Is it possible to make the white in the picture opaque? Slightly see through? If that makes sense! Thanks again. 

On 6/19/2020 at 9:46 AM, Pandagal said:

This is brilliant! Thank you so much. Is it possible to make the white in the picture opaque? Slightly see through? If that makes sense! Thanks again. 

Did you ever find an answer for this? I'm having the same problem. 

On 7/30/2020 at 9:35 AM, chrisphelps said:

Did you ever find an answer for this? I'm having the same problem. 

Can you share link to gallery? We can check easier.

@RyanDejaegher
 

Are you able to provide the CSS for Gallery Grid: Simple rather than masonary?

Many thanks!

Hey @kristenblowfield apologies for the delay in response. Do you have a link to your site that you can share?

Hi @RyanDejaegher 

Site is squarespace 7.1

https://alligator-cranberry-2y8h.squarespace.com/

PW: balloonatiks123

Is it possible to maintain the lightbox on click? with either Gallery: Masonry or Gallery Grid: Simple?

Many thanks

4 hours ago, kristenblowfield said:

Hi @RyanDejaegher 

Site is squarespace 7.1

https://alligator-cranberry-2y8h.squarespace.com/

PW: balloonatiks123

Is it possible to maintain the lightbox on click? with either Gallery: Masonry or Gallery Grid: Simple?

Many thanks

To keep lightbox on click, add this to Gallery Page Settings > Advanced > Header

<style>
  .gallery-caption {
    pointer-events: none;
}
</style>

Can I do custom CSS with a personal plan or do I need a business plan?

I want the use the effect @Pandagal demonstrates above

Thank you

On 6/20/2020 at 12:11 AM, RyanDejaegher said:

@Pandagal Is this the effect you're after? If so this could should get you started

 

/* Add this code to Design -> Custom CSS */

.gallery-caption {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 102%;
    text-align:center;
    opacity: 0;
    transition: all .3s ease;
    background-color: white;
    height: 100%;
}

.gallery-masonry-item:hover .gallery-caption {
    opacity: 1;
    transition: all .3s ease;
}

.gallery-caption-wrapper {
    display: flex;
    place-items: center;
    justify-content: center;
}

 

How do you change the size and font type of the captions when hover over?

14 hours ago, Dharrshiyni said:

How do you change the size and font type of the captions when hover over?

if you share link to gallery, we can help easier.

On 6/19/2020 at 12:11 PM, RyanDejaegher said:

@Pandagal Is this the effect you're after? If so this could should get you started

 

/* Add this code to Design -> Custom CSS */

.gallery-caption {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 102%;
    text-align:center;
    opacity: 0;
    transition: all .3s ease;
    background-color: white;
    height: 100%;
}

.gallery-masonry-item:hover .gallery-caption {
    opacity: 1;
    transition: all .3s ease;
}

.gallery-caption-wrapper {
    display: flex;
    place-items: center;
    justify-content: center;
}

 

I am trying for this effect on my site here https://laurawhiteuhlir.com/design. I tried using the code you suggested, but no luck. Any insight?

Thanks!

On 10/29/2020 at 9:54 AM, laurwhyyy said:

I am trying for this effect on my site here https://laurawhiteuhlir.com/design. I tried using the code you suggested, but no luck. Any insight?

Thanks!

I guess you need to add image caption first, then we can tweak the above code

(above for SS 7.1, your site is 7.0)

On 10/31/2020 at 4:06 AM, tuanphan said:

I guess you need to add image caption first, then we can tweak the above code

(above for SS 7.1, your site is 7.0)

I added image captions! What code would you advise using?

Thanks!

On 6/19/2020 at 12:11 PM, RyanDejaegher said:

@Pandagal Is this the effect you're after? If so this could should get you started

 

/* Add this code to Design -> Custom CSS */

.gallery-caption {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 102%;
    text-align:center;
    opacity: 0;
    transition: all .3s ease;
    background-color: white;
    height: 100%;
}

.gallery-masonry-item:hover .gallery-caption {
    opacity: 1;
    transition: all .3s ease;
}

.gallery-caption-wrapper {
    display: flex;
    place-items: center;
    justify-content: center;
}

 

Hi, this is fantastic. I have one additional question. Is there a way to maintain the 'clickthrough' link for the image in the gallery with this effect? It seems that the 'caption' block appears above the image, and thus prevents someone from clicking on the image itself to clickthrough.

Thanks!

On 11/5/2020 at 1:29 AM, Jpiac said:

Hi, this is fantastic. I have one additional question. Is there a way to maintain the 'clickthrough' link for the image in the gallery with this effect? It seems that the 'caption' block appears above the image, and thus prevents someone from clicking on the image itself to clickthrough.

Thanks!

Use this code

I tested on SS 7.1.

On 11/2/2020 at 7:12 AM, laurwhyyy said:

I added image captions! What code would you advise using?

Thanks!

.Hi. Sorry for delay. Do you still need help?

I don't see gallery caption/title

https://laurawhiteuhlir.com/design

Hi @tuanphan & @RyanDejaegher I'm trying to do the same however effect as you shared the code for in this thread earlier in the year but it won't work for my site, Specifically, I want it on the homepage found here https://www.marie-blanche.co.uk

Any advice would be great. Currently I'm getting nothing when inputing the code.

Thanks 

3 hours ago, otjones said:

Hi @tuanphan & @RyanDejaegher I'm trying to do the same however effect as you shared the code for in this thread earlier in the year but it won't work for my site, Specifically, I want it on the homepage found here https://www.marie-blanche.co.uk

Any advice would be great. Currently I'm getting nothing when inputing the code.

Thanks 

Try this code.

On 6/19/2020 at 12:46 PM, Pandagal said:

This is brilliant! Thank you so much. Is it possible to make the white in the picture opaque? Slightly see through? If that makes sense! Thanks again. 

I saw that someone else was able to find a solution as well but I'm not sure if I missed the code posted on this thread. I'm having the same issue and would love some help. Thank you much appreciated!!

On 1/28/2021 at 12:10 PM, WAF97 said:

I saw that someone else was able to find a solution as well but I'm not sure if I missed the code posted on this thread. I'm having the same issue and would love some help. Thank you much appreciated!!

can you share link to page where you use gallery? We can help easier

@RyanDejaegher Hi there you seem to know all about gallery captions.

Also new to 7.1. - I want to change the style of gallery reel caption.
I also hate the big gap between the image+caption and the arrows, how to reduce?
Thanks so much,

Tara

On 2/10/2021 at 8:01 AM, TDavy said:

@RyanDejaegher Hi there you seem to know all about gallery captions.

Also new to 7.1. - I want to change the style of gallery reel caption.
I also hate the big gap between the image+caption and the arrows, how to reduce?
Thanks so much,

Tara

You should share link. We can check easier

Have a 7.0 site I want the description (caption) to appear on hover over.

allnaturalkitchen.com.au/products

PW: ENTER

This is the closest thread I can find to the feature I'm wanting.