Gallery Captions HOVER Squarespace 7.1 Please help!

Pandagal · June 19, 2020

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
}

bangank36 · June 19, 2020

Hi Pandagal

Your site is not accessible

RyanDejaegher · June 19, 2020

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

Pandagal · June 19, 2020

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.

chrisphelps · July 30, 2020

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.

tuanphan · July 31, 2020

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.

kristenblowfield · August 2, 2020

@RyanDejaegher

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

Many thanks!

RyanDejaegher · August 5, 2020

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

kristenblowfield · August 12, 2020

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

tuanphan · August 12, 2020

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>

goodmorning · August 15, 2020

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

Dharrshiyni · October 2, 2020

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?

tuanphan · October 3, 2020

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.

laurwhyyy · October 29, 2020

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!

tuanphan · October 31, 2020

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)

laurwhyyy · November 2, 2020

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!

Jpiac · November 4, 2020

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!

tuanphan · November 6, 2020

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

otjones · November 9, 2020

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

tuanphan · November 9, 2020

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.

WAF97 · January 28

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!!

tuanphan · February 3

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

TDavy · February 10

@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

tuanphan · February 14

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

MMEbyKiandraTrickett · March 30

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.

tuanphan · March 31

On 3/30/2021 at 2:32 PM, MMEbyKiandraTrickett said:

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.

Hi. For these images? Overlay will cover image, title show on hover?

Gallery Captions HOVER Squarespace 7.1 Please help!

Question

Link to post

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

Posted Images

35 answers to this question

Recommended Posts

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Create an account or sign in to comment

Support

Community

Developers

Resources