Enlarge image AND show caption on hover: Simple Grid

Using custom CSS I've figured out how to enlarge a gallery image on hover using transform:scale

I've also figured out how to show a gallery caption on hover using the widely circulated code available on a number of SS designers sites and youTube channels.

But is it possible to do both at once without the caption blocking the image?

https://welcome-trial.squarespace.com/discography
password: 5678

Hi,

5678

password is incorrect

On 9/9/2023 at 5:45 AM, tuanphan said:

Hi,

5678

password is incorrect

Sorry, I have reinstated the 5678 password. I currently just have the code set to caption on hover.

On 9/21/2023 at 10:46 PM, Amy_Faire_ said:

Sorry, I have reinstated the 5678 password. I currently just have the code set to caption on hover.

Use this CSS code to make image enlarge on hover

/* Image enlarge on hover */
.gallery-grid-item-wrapper {
    overflow: hidden;
}
.gallery-grid-item-wrapper img, figure:hover img {
    transition: all 0.3s ease;
}
figure.gallery-grid-item:hover img {
    transform: scale(1.3);
}

Note: this code will run on all galleries

If you want code run on Discography page only, use this new code

/* Image enlarge on hover */
body#collection-64c16d70de89d22a79658d55 {
.gallery-grid-item-wrapper {
    overflow: hidden;
}
.gallery-grid-item-wrapper img, figure:hover img {
    transition: all 0.3s ease;
}
figure.gallery-grid-item:hover img {
    transform: scale(1.3);
}}

Thank you for your response tuanphan, I really appreciate your help.

The code you provided does enlarge the image however I didn't want the overflow to be hidden so I changed the code to this:

/* Image enlarge on hover */
.gallery-grid-item-wrapper img,
figure.gallery-grid-item:hover img {
    transition: all 0.3s ease;
}

figure.gallery-grid-item:hover img {
    transform: scale(1.3);
}

Now my only issue is that the gallery caption background doesn't enlarge so it's a dark square in the center of the enlarged album image on hover. I tried applying 'transform' to the caption background, got it to work, but it was then blocking the album cover, so then the album cover no longer enlarged. Any thoughts?