Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Gallery Captions HOVER Squarespace 7.1 Please help!


Pandagal

Question

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

Recommended Posts

  • 0

Hi Pandagal

Your site is not accessible

Greeting, it's BaNgan from 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, Portfolio hover Replace Link Style
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
  • 0

@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
  • 0
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. 

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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?

image.thumb.png.9a680b75a35532fda410ba0452c9e97b.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...