Hide caption on masonry gallery view, show on lightbox

I am attempting to set up a portfolio site that presents a masonry gallery without captions, but the captions appear when the lightbox is open. I also want the captions to be links.

I have partially achieved this by hiding captions on the masonry grid, and showing them on lightbox. The trouble I am having now is that the padding around the caption is making it un-clickable in some instances.

The caption in the screenshot "Caption Link Working" is acting as I would like - when you hover over the text "View Project," the mouse pointer changes to a cursor and a link address appears in the lower left.

However, the screenshot "Caption Link Not Working" shows an image of a different aspect ratio, which seems to break the link. 

I would appreciate any help you can give.

@sarahgracestudio can you share a link to the page you need help with so we can have a closer look?

Hi there, the site is https://crow-giraffe-h2z5.squarespace.com/home and the password is peanut

@SaranyaDesigns thanks for looking into this!

@sarahgracestudio ok it looks like the gallery controls (the left/right arrows) are interfering with the caption, they are absolutely positioned on top, so they cover the link which is why you can't click it.

I suggest adjusting the position of the left/right arrows to only come down 50% of the height instead of 100% and then positioning at the bottom of the flexbox. They may not be exactly half the height of the page, but it will be close enough visually and fix your interference. So add this to your custom CSS:

.gallery-lightbox-controls {
	height: 50% !important;
	align-items: flex-end;
}

Let me know?

That worked, thanks so much!!

I also want to hide caption on simple gallery view, show on lightbox. . .

Can anyone show me the CSS to do this?

Thanks!

On 3/18/2024 at 11:16 PM, karen.sale said:

I also want to hide caption on simple gallery view, show on lightbox. . .

Can anyone show me the CSS to do this?

Thanks!

Can you share link to gallery? We can check code easier

Tuanphan, I solved my problem.

Thanks for getting back to me!