Jump to content

Second Image on Hover in a 7.1 Gallery

Recommended Posts

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!

Link to comment
  • Replies 7
  • Views 2.2k
  • Created
  • Last Reply

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 8 months later...
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 2 weeks later...

@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

image.thumb.png.bdecd6dab5752f632b32d8b0e7d964c6.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 2 months later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.