Jump to content

Captions on Hover - Gallery Masonry Layout

Recommended Posts

Hello, 

I'm trying to display captions on hover (on hover only) for a gallery wihth a Masonry layout. 

https://formedgardens.squarespace.com/projects
password: fg

I'm using the following code: 
 

section[data-section-id="6526275e7a97df2f9d881199"]
.gallery-caption-grid-masonry h4 {
  margin-bottom: 0;
  text-align: center;
}

//Overlay Style //
section[data-section-id="6526275e7a97df2f9d881199"] .gallery-caption-grid-masonry {
  max-width: 100%;
  padding: 20px;
  pointer-events: none;
  position: absolute;
  bottom: 30%;
  width: 100%;
}

//Hover Mode //
section[data-section-id="6526275e7a97df2f9d881199"]
.gallery-masonry-item:hover {
opacity: 0.5;
}

It's getting the caption where I want it, however, i DON'T want the caption to display unless you hover over the image thumbnail. 

Does anyone know what CSS I can use to achieve this?

So the normal thumbnail state should just show the image, and then when you hover, you should be able to see the caption and the image should be faded out. Like the attached screenshot. 

Thank you 🙂 

Screenshot 2023-10-11 at 9.08.11 pm.png

Link to comment

Change the CSS to this, I've added an opacity of zero and a hover to change the opacity, hopefully that works.

section[data-section-id="6526275e7a97df2f9d881199"]
.gallery-caption-grid-masonry h4 {
  margin-bottom: 0;
  text-align: center;
  transition:ease-in-out 300ms;
}

//Overlay Style //
section[data-section-id="6526275e7a97df2f9d881199"] .gallery-caption-grid-masonry {
  max-width: 100%;
  padding: 20px;
  pointer-events: none;
  position: absolute;
  bottom: 30%;
  width: 100%;
  opacity:0;
  transition:ease-in-out 300ms;
}

//Hover Mode //
section[data-section-id="6526275e7a97df2f9d881199"]
.gallery-masonry-item:hover {
  opacity: 0.5;
  .gallery-caption-grid-masonry {
    opacity:1;
  }
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

I can't actually see where the text opacity is coming from, it looks wrong but I can't see why in the code. 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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...

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.