scottscottsee Posted June 17, 2020 Share Posted June 17, 2020 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
Solution Beyondspace Posted June 18, 2020 Solution Share Posted June 18, 2020 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 tuanphan and scottscottsee 2 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
scottscottsee Posted June 18, 2020 Author Share Posted June 18, 2020 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! Beyondspace 1 Link to comment
jdm12991 Posted March 11, 2021 Share Posted March 11, 2021 I'm a bit confused how to use the code above? What is /alley-house-1 referring to? Link to comment
Beyondspace Posted March 12, 2021 Share Posted March 12, 2021 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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
Beyondspace Posted March 23, 2021 Share Posted March 23, 2021 @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 tuanphan 1 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
chaya1 Posted June 1, 2021 Share Posted June 1, 2021 Hi Could you explain where to put the code for gallery hover above? thank you. Link to comment
tuanphan Posted June 3, 2021 Share Posted June 3, 2021 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment