Image on Image Overlay on SquareSpace 7.1

Site URL: https://sunflower-bluebird-jb83.squarespace.com/

I am trying to hover an image over another image that exists in a photogrid. Example the grid is all happy faces and when you hover over each of them, it's an image of sad faces. Basic example but that's the point I'm trying to get at. 

Site pw is getwell2020

This code for first image. If it works, I will send for other

Add to Home > Design > custom CSS

.homepage figure:nth-child(1):hover .gallery-grid-item-wrapper img {
    visibility: hidden;
}
.homepage figure:nth-child(1):hover .gallery-grid-item-wrapper {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg);
    background-size: cover;
}