Gallery hover with caption and clickable link 7.1

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. 

Issues

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 

With bottom gallery, to make image + caption clickable, add this to Home > Design > Custom CSS

figcaption.gallery-caption.gallery-caption-grid-masonry {
    pointer-events: none;
}

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!

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%;
    text-align:center;
    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;
}

I just wrote these code yesterday, try using on your site.

Amazing @tuanphan! Thank you so much, it worked like a charm!!