Beyondspace Posted May 3, 2021 Share Posted May 3, 2021 Site URL: https://beyondspace-showcase.squarespace.com/gallery-hovers/?password=1234&utm_source=squarespace_forum&utm_medium=topic&utm_campaign=promo Hi my friends, Today I gonna share a solution I used to customize the hover effect on Gallery Section (on 7.1 template). There are several steps to follow and finally you got a custom hover effect on caption enabled grid gallery section. Access to this page for the step-by-step instruction to copy and paste the final code into your code injection, it will work site-wide, page specific or section specific https://beyondspace-showcase.squarespace.com/gallery-hovers Note: This solution is specifically for applying the caption animation, you want to implement your own stylesheet to modify the caption style such as responsive, font style and color...etc video~1.mp4 erikaa and tuanphan 2 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
Beyondspace Posted May 25, 2021 Author Share Posted May 25, 2021 1 hour ago, SST said: @bangank36 this looks amazing. is there a simple version as well for 7.1 ? i mean...just on mouse over the colour 50% and text caption? and any chance to make this work for video blocks? Would love to know if that could work. This is your 7.1 gallery section, what your asking can be achieved, you can post as new topic for other contributor to help having a look BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
Beyondspace Posted May 25, 2021 Author Share Posted May 25, 2021 24 minutes ago, SST said: @bangank36 a bunch of these already online....no REPLIES or solutions... It would be amazing if this could work out somehow. 10 unsolved issues and more ... searched like a bunch of other all over the forum. Sorry, this topic is used for specific purpose to share the hover effect for gallery section BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
PartTwoDesign Posted February 15, 2022 Share Posted February 15, 2022 Hi @bangank36 I'm trying to install your code on my site but I think I need a little assistance, if you can help... https://ascot-signs.squarespace.com/ Password - ASCOTSITE Here is the gallery I'm trying to affect (the 3 images that rest above the footer): Link to comment
Beyondspace Posted February 17, 2022 Author Share Posted February 17, 2022 (edited) On 2/15/2022 at 7:44 PM, PartTwoDesign said: Hi @bangank36 I'm trying to install your code on my site but I think I need a little assistance, if you can help... https://ascot-signs.squarespace.com/ Password - ASCOTSITE Here is the gallery I'm trying to affect (the 3 images that rest above the footer): Make sure that the code js is wrapper with <script></script> Let me know how it works Edited February 17, 2022 by bangank36 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
PartTwoDesign Posted February 18, 2022 Share Posted February 18, 2022 Hi @bangank36 Thanks I've added the script tags. Please can you help with step 4? I've pasted the html into the description of the first image (B+W factory shot) but I don't think I've done this correctly. Appreciate the help! Thanks, Anna Link to comment
tuanphan Posted February 21, 2022 Share Posted February 21, 2022 On 2/18/2022 at 8:46 PM, PartTwoDesign said: Thanks I've added the script tags. Please can you help with step 4? I've pasted the html into the description of the first image (B+W factory shot) but I don't think I've done this correctly. Appreciate the help! Thanks, Anna Have you solved it yet? 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
PartTwoDesign Posted February 21, 2022 Share Posted February 21, 2022 Hi @tuanphan 👋 No not yet, if you can help that would be fantastic... https://ascot-signs.squarespace.com/ Password - ASCOTSITE Beyondspace 1 Link to comment
PartTwoDesign Posted February 22, 2022 Share Posted February 22, 2022 @tuanphan @bangank36 Can you help me out with this? Greatly appreciate the guidance! Thanks, Anna Beyondspace 1 Link to comment
PartTwoDesign Posted February 23, 2022 Share Posted February 23, 2022 Hi @tuanphan I have since found alternative code which works well for these bottom 3 images (Grid Strips Gallery Section) - https://ascot-signs.squarespace.com/projects Currently, these images go completely black on hover, however I would just like the images to darken on hover similar to what I've achieved on the Summary Block on the Projects page: https://ascot-signs.squarespace.com/projects I know it's just a case of tweaking the code I have, if you can advise? Thanks! Anna Beyondspace 1 Link to comment
Beyondspace Posted February 23, 2022 Author Share Posted February 23, 2022 16 hours ago, PartTwoDesign said: @tuanphan @bangank36 Can you help me out with this? Greatly appreciate the guidance! Thanks, Anna After applying my code, have you enable the caption on gallery design? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment