Second Image on Hover in a 7.1 Gallery

Site URL: https://seal-burgundy-yx98.squarespace.com/

I'm hoping to have a hover effect on the images in the gallery on my landing page for Squarespace 7.1, that allows a second image to fade in. I've been able to find lots of tutorials for this for 7.0, and for image blocks and products on 7.1, but not for galleries. And I haven't been able to figure out how to set up the classes properly for this use.

I'd like each image in the gallery on my landing page (currently a simple grid, which is the only simple grid gallery on the website) to show a second image on hover, and then those images would link to a page on my site when clicked. I'd only use this effect on my site's landing page (which is also the only page with a masonry grid). Ideally The links are currently set up. Ideally the hover images would be able to be uploaded using this method, but this is flexible.

Site: https://seal-burgundy-yx98.squarespace.com/

Login with RobHutch

Thanks!

This is perfect! Thank you so much! You have no idea how helpful this was!

For some reason, the scale of the second image wasn't quite working, but I just added "background-size: 100%;" and that fixed it. 

Thanks!

I'm a bit confused how to use the code above? What is /alley-house-1 referring to?

8 hours ago, jdm12991 said:

I'm a bit confused how to use the code above? What is /alley-house-1 referring to?

it's clickthrough url of the site in the origin topic, a css trick to select the element that has the url and add the 2nd image via custom css

@Chuy

.portfolio-grid-basic .grid-item:hover .grid-image {
  opacity: 1;
}
.portfolio-grid-basic .grid-item .grid-image-inner-wrapper:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0;
    transition: opacity 0.75s;
}
.portfolio-grid-basic .grid-item:hover .grid-image-inner-wrapper:after {
	opacity: 1;
}
.portfolio-grid-basic .grid-item[href="/home/commercial"] .grid-image-inner-wrapper:after {
    background-image: url(https://images.squarespace-cdn.com/content/v1/603e830982528c2883460ce8/1615921242282-77VNK1PKGTUT6YNQM9Q3/ke17ZwdGBToddI8pDm48kMRyhYDgPk9y7GMUxyVGe-RZw-zPPgdn4jUwVcJE1ZvWQUxwkmyExglNqGp0IvTJZUJFbgE-7XRK3dMEBRBhUpzEOKU3ynhxGCOkjkiI2jkNnwo4GpKkY3nGgozguHn9FA2PHrUGCg52mo1A4uM7YTw/Ibanez_Website_Homepage_Community_Featured_Image.jpg?format=750w);
}

Find the url of the portfolio items and add more item in the code above

The image url can be collected using Custom css -> Manage Files section

Using the CSS Editor – Squarespace Help

Hi Could you explain where to put the code for gallery hover above? thank you. 

On 6/2/2021 at 5:09 AM, chaya1 said:

Hi Could you explain where to put the code for gallery hover above? thank you. 

Add to DESIGN > CUSTOM CSS