Gallery Captions HOVER Squarespace 7.1 Please help!

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.