Jump to content

Gallery Captions HOVER Squarespace 7.1 Please help!

Recommended Posts

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
}

Screenshot 2020-06-19 at 12.47.24.png

Link to comment

Hi Pandagal

Your site is not accessible

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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

 

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Link to comment
  • 1 month later...
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
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?

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 weeks later...
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!

Link to comment
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)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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!

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...
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!!

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Screen Shot 2021-02-09 at 12.36.09 pm.png

You should share link. We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.