laurenruth1 Posted April 8, 2020 Share Posted April 8, 2020 Hi everybody, Does anyone know how I can get a gallery hover effect for gallery images that are links in Squarespace 7.1? Almost so the photo fades a little, similar to this website when you hover over the images: http://marylennox.de/ The page on my website I'd like to apply this to is: https://denim-khaki-tp4d.squarespace.com/gallery-test-2 Many thanks, Lauren Link to comment
christyprice Posted April 8, 2020 Share Posted April 8, 2020 Hi @laurenruth1, This should get you close. You can play around with the opacity value to make it more or less opaque: .gallery-grid-item-wrapper:hover img { opacity: 0.3; } rwine, wonderpiece, BellamyTree and 1 other 2 1 1 christyprice.com 🇺🇸 Austin, TX US ✅ Get my 100+ item Client Process Checklist for $17. 📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts 🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz) 🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023 Link to comment
laurenruth1 Posted April 8, 2020 Author Share Posted April 8, 2020 @christyprice that works great! thanks so much 🙂 Link to comment
christyprice Posted April 8, 2020 Share Posted April 8, 2020 Thanks for letting me know @laurenruth1. If you could "vote up" the answer on the left, that will let others know it's a valid solution. christyprice.com 🇺🇸 Austin, TX US ✅ Get my 100+ item Client Process Checklist for $17. 📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts 🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz) 🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023 Link to comment
WillH Posted April 11, 2020 Share Posted April 11, 2020 On 4/8/2020 at 12:58 PM, christyprice said: Hi @laurenruth1, This should get you close. You can play around with the opacity value to make it more or less opaque: .gallery-grid-item-wrapper:hover img { opacity: 0.3; } Hi, Do you know of a way to have text appear on a hover over in gallery blocks in 7.1? I just want to be able to display the name of the person in each photo in the gallery. Thanks! Link to comment
tuanphan Posted April 12, 2020 Share Posted April 12, 2020 8 hours ago, WillH said: Hi, Do you know of a way to have text appear on a hover over in gallery blocks in 7.1? I just want to be able to display the name of the person in each photo in the gallery. Thanks! Try 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
WillH Posted April 12, 2020 Share Posted April 12, 2020 (edited) 13 hours ago, tuanphan said: Try Thanks very much for this. It seems to be working for the most part, but is there a way for the text to only display on hover over? I have read through the original thread but havent seen anything about this. Its also showing the image extension (.jpeg) as well. I have tried removing the ext in the file name but it still appears. Any way around this? Thank you! Edited April 12, 2020 by WillH Link to comment
tuanphan Posted April 13, 2020 Share Posted April 13, 2020 (edited) 23 hours ago, WillH said: Thanks very much for this. It seems to be working for the most part, but is there a way for the text to only display on hover over? I have read through the original thread but havent seen anything about this. Its also showing the image extension (.jpeg) as well. I have tried removing the ext in the file name but it still appears. Any way around this? Thank you! Add to Home > Design > Custom CSS .gallery-item-description { opacity: 0; transition: all ease-in-out 0.5s; } .gallery-item-description:hover { opacity: 1; } Edited April 13, 2020 by tuanphan 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
wonderpiece Posted April 21, 2022 Share Posted April 21, 2022 On 4/8/2020 at 10:58 AM, christyprice said: Hi @laurenruth1, This should get you close. You can play around with the opacity value to make it more or less opaque: .gallery-grid-item-wrapper:hover img { opacity: 0.3; } This worked nicely for me. Would you also have code to make the transition smoother between hover/non-hover? Something more like how the hover acts in the nav bar with the main CTA on the right (still in progress but a good example of the hover behavior I am seeking if possible!) https://saffron-lychee-ydn6.squarespace.com/ron-rakow PW: retro It's not terrible as is but I'd love to refine it. It's the gallery under "EXPLORE MORE OF OUR ROSTER" Thank you! Link to comment
tuanphan Posted April 24, 2022 Share Posted April 24, 2022 On 4/21/2022 at 11:07 AM, wonderpiece said: This worked nicely for me. Would you also have code to make the transition smoother between hover/non-hover? Something more like how the hover acts in the nav bar with the main CTA on the right (still in progress but a good example of the hover behavior I am seeking if possible!) https://saffron-lychee-ydn6.squarespace.com/ron-rakow PW: retro It's not terrible as is but I'd love to refine it. It's the gallery under "EXPLORE MORE OF OUR ROSTER" Thank you! Remove above code & use this new code figure.gallery-grid-item .gallery-grid-image-link:after { content: ""; background-color: rgba(255,255,255,0.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; opacity: 0; transition: all 0.2s ease; } figure.gallery-grid-item:hover .gallery-grid-image-link:after { opacity: 1; transition: all 0.2s ease; } wonderpiece 1 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
wonderpiece Posted April 27, 2022 Share Posted April 27, 2022 As always, huge thanks @tuanphan. Worked nicely. Link to comment
shannonborg Posted May 2 Share Posted May 2 (edited) I'm trying to figure this out too - basically, I want the same Text on Hover effect that is available in a Portfolio Page to be on my Gallery Block that I put onto a homepage - as in the image: I wonder why they don't just make the same effect available....:) Or am I missing something? And I don't want to make the Portfolio Page my homepage, because I want to format the clickthrough page differently than a Portfolio Page will allow.... Thank you for your help! Edited May 2 by shannonborg added some words Link to comment
tuanphan Posted May 4 Share Posted May 4 On 5/2/2023 at 7:41 AM, shannonborg said: I'm trying to figure this out too - basically, I want the same Text on Hover effect that is available in a Portfolio Page to be on my Gallery Block that I put onto a homepage - as in the image: I wonder why they don't just make the same effect available....:) Or am I missing something? And I don't want to make the Portfolio Page my homepage, because I want to format the clickthrough page differently than a Portfolio Page will allow.... Thank you for your help! Can you share link? We can check easier 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