Jump to content

Gallery hover with caption and clickable link 7.1

Recommended Posts

Site URL: https://reed-sawfish-m2k3.squarespace.com/home-3

Hi there,

Having a couple issues and hoping the community can help. I've scoured the forum and frankensteined a bunch of code and running into a wall.

Goal: Using Gallery:Grid Simple (See image #1) - Hover over image, caption centered, and clickable to link to another page. 


1. After hovering over image, white overlay is not aligned with image. Overlay starts at the center of the image and uses the caption from the incorrect image. 

2. Would like to change the font size and typeface.

3. Image is not clickable when hovering over white overlay. (Due to issue #1, parts where the exposed image is not covered by white overlay is actually clickable).


I also tested using Masonry (See image #2), which is below the Simple Grid example. Same issues as above Issue #2 except the white overlay and caption are correctly aligned. One small caveat is the width of the white overlay does not cover entire image regardless of width dimension I input.

Appreciate any help on this and thanks!

Site: https://reed-sawfish-m2k3.squarespace.com/home-3

Site password: Dubya 


Screen Shot 2020-11-02 at 2.48.47 AM.png

Link to comment
  • Replies 5
  • Views 1.7k
  • Created
  • Last Reply

Amazing, that worked! Thank you so much @tuanphan. 

Any advice on changing the fonts and fixing the hover effect overlay being non-centered for Grid: Simple and the hover overlay not covering the entire image in Grid: Masonry? 

Appreciate your time and help!

Link to comment

Update: After searching forum, got the white overlay to work on hover for Grid Simple. Now the captions don't show up. Here's the code I'm using. It's like the finger in a dam, fix one problem, another one pops up! 

.gallery-caption {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    opacity: 0;
    transition: all .6s ease;
    background-color: white;
    height: 100%;

.gallery-grid-item.has-clickthrough:hover {
    opacity: 0.5;
    transition: all .6s ease;

.gallery-caption-wrapper {
    display: flex;
    place-items: center;
    justify-content: center;

Screen Shot 2020-11-02 at 12.00.05 PM.png

Link to comment


This topic is now archived and is closed to further replies.

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