Second Image on Hover in a 7.1 Gallery

Since you can grab the uploaded image url, I can suggest you use psuedo :after selector for this, using the unique url in the link tag

a[href="/alley-house-1"]:after {
    background: url(https://images.squarespace-cdn.com/content/v1/5e9f52c…/1591746790510-TLM3OCA969QR248359Q9/ke17ZwdGBToddI8pDm48kNIz01GxeNglza_traDdevsUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYxCRW4BPu10St3TBAUQYVKck_3oyjxD2E6g656zntaR4vQBwPCV_Yc9BnFEdXAQ6xzMr4wPFfphDwEQcs_2fgoE/Pavilion+House+Sect_wt-1.jpg?format=300w);
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: opacity 0.75s;
}
a[href="/alley-house-1"]:hover:after {
	opacity: 1;
}

Output: http://recordit.co/HDXB6rAspQ

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