Section Background Image Zoom Upon Hovering Button

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!

Hi,

Can you share link to page where you use image + button (your site)? We can check easier

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

(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>

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?

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