7.1 Gallery Image: overlay and caption on hover

tuanphan · July 20, 2022

14 hours ago, carin said:

Hello @tuanphan, I would like to use

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? 🙂

Use this code to Design > Custom CSS

/* Reel hover */
.gallery-reel .gallery-caption-reel {
    visibility: visible !important;
    top: 50% !important;
    margin: 0;
    transition: all 0.3s;
    z-index: 9999999;
}

figure:hover .gallery-caption-reel {
    opacity: 1 !important;
    transition: all 0.3s;
}
/* Overlay Color */
.gallery-reel-item-src:after {
    content: "";
    background-color: rgba(255,255,255,0.75);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s;
}
figure:hover .gallery-reel-item-src:after {
    opacity: 1;
    transition: all 0.3s;
}

If need to apply on one page, use this code to Page Header

<style>
  /* Reel hover */
.gallery-reel .gallery-caption-reel {
    visibility: visible !important;
    top: 50% !important;
    margin: 0;
    transition: all 0.3s;
    z-index: 9999999;
}

figure:hover .gallery-caption-reel {
    opacity: 1 !important;
    transition: all 0.3s;
}
/* Overlay Color */
.gallery-reel-item-src:after {
    content: "";
    background-color: rgba(255,255,255,0.75);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s;
}
figure:hover .gallery-reel-item-src:after {
    opacity: 1;
    transition: all 0.3s;
}
</style>

kiyary · August 18, 2022

Hello @tuanphanI am back from the dead to this code, which worked wonderfully until now, I think square space updated something and now all the texts appear as a caption and not on hoover. Please could you help me?

This is the code which was working but now it doesnt and I dont know why 😞 or how to fix it.

thank you so much

EDIT to add my site is kiyary.com

thanks!

Edited August 18, 2022 by kiyary

tuanphan · August 21, 2022

On 8/18/2022 at 8:30 PM, kiyary said:

Hello @tuanphanI am back from the dead to this code, which worked wonderfully until now, I think square space updated something and now all the texts appear as a caption and not on hoover. Please could you help me?

This is the code which was working but now it doesnt and I dont know why 😞 or how to fix it.

<style>
.lightbox-caption {
color: grey;
font-weight: light;
margin: 15px 0;
text-align: center;
display: none;
position: absolute;
bottom: -35px;
z-index: 9999;
}
.gallery-lightbox-wrapper:hover {
   cursor: pointer;
}
.gallery-lightbox-item[data-in='false'] .lightbox-caption {
   display: none!important;
}
.gallery-lightbox-item[data-active='true']:hover .lightbox-caption{
   display: inline-block;
}
.gallery-lightbox-wrapper:hover .gallery-lightbox-item[data-active='true'] .lightbox-caption{
   display: inline-block;
}
.gallery-lightbox .lightbox-caption {
display: block !important;
}
</style>

thank you so much

EDIT to add my site is kiyary.com

thanks!

I see it looks fine here https://www.kiyary.com/portraits

Caption appear in lightbox

caption disappear in grid view

What is your problem?

kiyary · August 21, 2022

7 hours ago, tuanphan said:

I see it looks fine here https://www.kiyary.com/portraits

Caption appear in lightbox

caption disappear in grid view

What is your problem?

Hello @tuanphan! thank you for getting back to me. I wish I could find answers without troubling anyone.

I need to caption to appear on hover, like they do for my projects, but in the masonry grid

So, instead of appearing like this, the captions appear underneath 😞, there is no hover or overlay with text. and I didnt change the code or anything. Do you know what happened? or how to fix this issue? thank you

This is the code I have, which of course I do not understand , this is foreign language for me haha.

tuanphan · August 23, 2022

On 8/21/2022 at 3:55 PM, kiyary said:

Hello @tuanphan! thank you for getting back to me. I wish I could find answers without troubling anyone.

I need to caption to appear on hover, like they do for my projects, but in the masonry grid

So, instead of appearing like this, the captions appear underneath 😞, there is no hover or overlay with text. and I didnt change the code or anything. Do you know what happened? or how to fix this issue? thank you

This is the code I have, which of course I do not understand , this is foreign language for me haha.

<script>
jQuery(document).ready(function($){
$('.gallery-lightbox-list .gallery-lightbox-item').each(function(){
var text = $(this).find('img').attr("alt");
console.log(text);
$(this).append('<div class="lightbox-caption">' + text + '</div>');
})
})
</script>
<style>
.lightbox-caption {
color: grey;
font-weight: light;
margin: 15px 0;
text-align: center;
display: none;
position: absolute;
bottom: -35px;
z-index: 9999;
}
.gallery-lightbox-wrapper:hover {
   cursor: pointer;
}
.gallery-lightbox-item[data-in='false'] .lightbox-caption {
   display: none!important;
}
.gallery-lightbox-item[data-active='true']:hover .lightbox-caption{
   display: inline-block;
}
.gallery-lightbox-wrapper:hover .gallery-lightbox-item[data-active='true'] .lightbox-caption{
   display: inline-block;
}
.gallery-lightbox .lightbox-caption {
display: block !important;
}
</style>

<script>

Can you enable Gallery Caption & add some demo captions? Currently I don't see any caption here

kiyary · August 24, 2022

On 8/23/2022 at 4:43 AM, tuanphan said:

Can you enable Gallery Caption & add some demo captions? Currently I don't see any caption here

Hello Tuan! Yes,

here is activated: https://www.kiyary.com/editorial-illustration , the captions appear underneath the images.

Thank you!!!!

kiyary · August 24, 2022

On 8/23/2022 at 4:43 AM, tuanphan said:

Can you enable Gallery Caption & add some demo captions? Currently I don't see any caption here

1 hour ago, kiyary said:

Hello Tuan! Yes,

here is activated: https://www.kiyary.com/editorial-illustration , the captions appear underneath the images.

Thank you!!!!

Hi @tuanphan I am using again the same code you provided long ago,

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
pointer-events: none; /* enable click */
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 2rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}

but it has no effect 😞

tuanphan · August 26, 2022

On 8/25/2022 at 2:59 AM, kiyary said:

Hi @tuanphan I am using again the same code you provided long ago,

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
pointer-events: none; /* enable click */
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 2rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}

but it has no effect 😞

If you look at the code, you will see "grid". This code for Gallery Grid. Your page uses Gallery Masonry.

Use this new code

/* Gallery Section Masonry Hover */
figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.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;
    color: white;
}
.gallery-masonry-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after, .gallery-masonry-item-wrapper:after {
    background: rgba(0,0,0,0.5); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
    pointer-events: none;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after, .gallery-masonry-item:hover .gallery-masonry-item-wrapper:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

JennSolo · September 5, 2022

Hi @tuanphan- Hopping in this thread as I am using the Gallery Block in the new fluid engine and cannot get the code to work for the title hover on the images. Any help would be great. Thanks

Edited September 5, 2022 by JennSolo

tuanphan · September 6, 2022

On 9/5/2022 at 7:34 AM, JennSolo said:

Hi @tuanphan- Hopping in this thread as I am using the Gallery Block in the new fluid engine and cannot get the code to work for the title hover on the images. Any help would be great. Thanks

Can you share link to page where you added Gallery Block?

JennSolo · September 7, 2022

@tuanphan Here is the link (gallery block is on homepage under carosel) https://seahorse-cylinder-lg2j.squarespace.com/

Password is: portfolio

tuanphan · September 8, 2022

22 hours ago, JennSolo said:

@tuanphan Here is the link (gallery block is on homepage under carosel) https://seahorse-cylinder-lg2j.squarespace.com/

Password is: portfolio

You mean Feature Videos section?

Initial: show image

Hover: Show image, show overlay, show title over overlay

How about link?

kiyary · September 8, 2022

On 8/26/2022 at 11:43 AM, tuanphan said:

If you look at the code, you will see "grid". This code for Gallery Grid. Your page uses Gallery Masonry.

Use this new code

/* Gallery Section Masonry Hover */
figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.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;
    color: white;
}
.gallery-masonry-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after, .gallery-masonry-item-wrapper:after {
    background: rgba(0,0,0,0.5); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
    pointer-events: none;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after, .gallery-masonry-item:hover .gallery-masonry-item-wrapper:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

Hello @tuanphan I added the code on advancec - code injection but then the code appears at the botton on the footer and it doesnt work.

thank you anyways

tuanphan · September 9, 2022

17 hours ago, kiyary said:

Hello @tuanphan I added the code on advancec - code injection but then the code appears at the botton on the footer and it doesnt work.

thank you anyways

That code is CSS, you need to add it to Design > Custom CSS

NT111 · March 16, 2023

Hello @tuanphan

I am using gallery strips format. I successfully got the captions to show up over the image when hovering, but I haven't successfully achieved the following:

1) removing the extra white space from the hidden caption

2) having a caption show up in Lightbox underneath the image

What code do I need to add? Thank you!

---

Code I am using is below:

figure.gallery-strips-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: 20%;
transition: opacity ease 200ms !important;
opacity: 0 !important;
pointer-events: none;
}
.gallery-strips-item:hover .gallery-caption-content {
opacity: 1 !important;
}
/* overlay */
.gallery-strips-item-wrapper a:after {
background: rgba(255,255,255,0.90);
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
transition: opacity ease 200ms !important;
}
.gallery-strips-item:hover .gallery-strips-item-wrapper a:after {
opacity: 0.85;
}
.gallery-caption p {white-space:pre; text-align:center}

lina1570047784 · April 25, 2023

Hello @tuanphan , I've tried a few of the codes you've provided earlier in this thread but they don't seem to work for me. Do you mind helping me out?
I'm using Gallery Grid in 7.1 and would like the captions + semi opaque color (black or white) to appear on the image when hovering the image. I'd also like the caption to be visible in lightbox view. Is this possible?

chiton-nectarine-r7sw.squarespace.com

pw: desktoprain

tuanphan · April 26, 2023

On 3/16/2023 at 7:12 AM, NT111 said:

Hello @tuanphan

I am using gallery strips format. I successfully got the captions to show up over the image when hovering, but I haven't successfully achieved the following:

1) removing the extra white space from the hidden caption

2) having a caption show up in Lightbox underneath the image

What code do I need to add? Thank you!

---

Code I am using is below:

figure.gallery-strips-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: 20%;
transition: opacity ease 200ms !important;
opacity: 0 !important;
pointer-events: none;
}
.gallery-strips-item:hover .gallery-caption-content {
opacity: 1 !important;
}
/* overlay */
.gallery-strips-item-wrapper a:after {
background: rgba(255,255,255,0.90);
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
transition: opacity ease 200ms !important;
}
.gallery-strips-item:hover .gallery-strips-item-wrapper a:after {
opacity: 0.85;
}
.gallery-caption p {white-space:pre; text-align:center}

Sorry. I don't see your comment. Do you still need help? Can you share link?

18 hours ago, lina1570047784 said:

Hello @tuanphan , I've tried a few of the codes you've provided earlier in this thread but they don't seem to work for me. Do you mind helping me out?
I'm using Gallery Grid in 7.1 and would like the captions + semi opaque color (black or white) to appear on the image when hovering the image. I'd also like the caption to be visible in lightbox view. Is this possible?

chiton-nectarine-r7sw.squarespace.com

pw: desktoprain

I see you figured it out?

lina1570047784 · April 26, 2023

2 minutes ago, tuanphan said:

Sorry. I don't see your comment. Do you still need help? Can you share link?

I see you figured it out?

Oh, sorry, I was literally just testing out your Masonry code, but it was for 1 minute. Now I'm back with Grids and the question is still valid.

lina1570047784 · April 26, 2023

22 hours ago, tuanphan said:

I see you figured it out?

No, sorry @tuanphan, I haven't figured it out. Happy for some help, if possible. I'm using 7.1 Gallery Grids. I would like the hover function + no extra white space underneath the images (where the captions should have been) + captions in Lightbox mode.

Edited April 27, 2023 by lina1570047784
clarify all needs

twc001 · April 26, 2023

Hi @tuanphan wondering if you have a quick fix here.

I am on squarespace 7.1 using the Grid:Simple Portfolio page where the title shows directly underneath the image.

Would like to replicate a feature similar to this site where when you hover over the image, the text is hidden until you hover over the image then it appears below left aligned

See reference here

https://galeriehalf.com/

I know you are able to do hover overlay on the portfolio page but I would prefer to have the title below the image and not on top.

Any suggestions on adding code the the portfolio grid?

Thank you

tuanphan · April 29, 2023

On 4/26/2023 at 4:36 PM, tuanphan said:

Sorry. I don't see your comment. Do you still need help? Can you share link?

I see you figured it out?

With Homepage, use this CSS

body.homepage {
figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.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-strips-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-strips-item-wrapper a:after {
    background: rgba(255,255,255,0.9); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-strips-item:hover .gallery-strips-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
}

tuanphan · April 29, 2023

On 4/27/2023 at 6:58 AM, twc001 said:

Hi @tuanphan wondering if you have a quick fix here.

I am on squarespace 7.1 using the Grid:Simple Portfolio page where the title shows directly underneath the image.

Would like to replicate a feature similar to this site where when you hover over the image, the text is hidden until you hover over the image then it appears below left aligned

See reference here

https://galeriehalf.com/

I know you are able to do hover overlay on the portfolio page but I would prefer to have the title below the image and not on top.

Any suggestions on adding code the the portfolio grid?

Thank you

What is your site url? We can help easier

lina1570047784 · May 22, 2023

Hi, @tuanphan, I see that we're 2 people asking similar questions here. My question is:
I'm using 7.1 Gallery Grids, Strips. I would like the caption hover function + no extra white space underneath the images (where the captions should have been) + if possible captions in Lightbox mode too.

Happy for some help, if possible.

https://chiton-nectarine-r7sw.squarespace.com

pw: rainyday2

tuanphan · May 25, 2023

On 5/22/2023 at 3:42 PM, lina1570047784 said:

Hi, @tuanphan, I see that we're 2 people asking similar questions here. My question is:
I'm using 7.1 Gallery Grids, Strips. I would like the caption hover function + no extra white space underneath the images (where the captions should have been) + if possible captions in Lightbox mode too.

Happy for some help, if possible.

https://chiton-nectarine-r7sw.squarespace.com

pw: rainyday2

Add to Design > Custom CSS

/* Gallery hover - with No Link */
figure[class*="gallery"] {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption .gallery-caption-wrapper p.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;
}
figure[class*="gallery"]:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
div[class*="-item-wrapper"]: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;
}
figure[class*="gallery"]:hover div[class*="-item-wrapper"]:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

With lightbox caption, see this

https://forum.squarespace.com/topic/151777-gallery-caption-workarounds-for-71-round-two/

lina1570047784 · May 25, 2023

1 hour ago, tuanphan said:

Add to Design > Custom CSS

Thank you so much! Actually, @tuanphan, I just decided I will leave the hover function and just keep regular captions. But how do I get captions in lightbox mode?

7.1 Gallery Image: overlay and caption on hover

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources