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>