imdanielduncan Posted June 23, 2023 Share Posted June 23, 2023 Hi, I was wondering if it's possible to create a "Section Background Image Zoom Upon Hovering Button" in Squarespace 7.1. Basically, I want the background image of a certain section to zoom in (or scale) when I hover over a button. I'll attach a Screen Recording below in case my explanation was not detailed enough. Thanks! Screen Recording 2023-06-23 at 2.57.20 PM.mov Link to comment
tuanphan Posted June 25, 2023 Share Posted June 25, 2023 Hi, Can you share link to page where you use image + button (your site)? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
imdanielduncan Posted June 28, 2023 Author Share Posted June 28, 2023 On 6/25/2023 at 2:09 AM, tuanphan said: Hi, Can you share link to page where you use image + button (your site)? We can check easier Sure, the URL is: https://www.starvedrockphotographer.com/homepage-draft Link to comment
tuanphan Posted June 30, 2023 Share Posted June 30, 2023 (This code for Photography) Add to Last Line in Code Injection > Footer. This code won't work with PARALLAX feature. <script> $('div#block-yui_3_17_2_1_1685501077192_12722 a').hover(function(){ $('[data-section-id="6476b6d57c47b25e21b33735"]').addClass("show"); //Add the active class to the area is hovered }, function () { $('[data-section-id="6476b6d57c47b25e21b33735"]').removeClass("show"); }); </script> <style> .section-border img { transition: all 0.3s; } .show .section-border img { transition: all 0.3s; transform: scale(1.5); } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
imdanielduncan Posted July 2, 2023 Author Share Posted July 2, 2023 (edited) On 6/30/2023 at 3:17 AM, tuanphan said: (This code for Photography) Add to Last Line in Code Injection > Footer. This code won't work with PARALLAX feature. <script> $('div#block-yui_3_17_2_1_1685501077192_12722 a').hover(function(){ $('[data-section-id="6476b6d57c47b25e21b33735"]').addClass("show"); //Add the active class to the area is hovered }, function () { $('[data-section-id="6476b6d57c47b25e21b33735"]').removeClass("show"); }); </script> <style> .section-border img { transition: all 0.3s; } .show .section-border img { transition: all 0.3s; transform: scale(1.5); } </style> Awesome, thanks! Is there any way this can work with the parallax effect or do I have to pick between the two? Edited July 2, 2023 by imdanielduncan Link to comment
tuanphan Posted July 3, 2023 Share Posted July 3, 2023 Just tried new code, but it won't work with Parallax. I'm also not sure if it runs with a static image or not. You can try Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (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