How to add hover effect for a shape that's under an image and text block.

Hi there,

As the title says, I'm trying to create a colour shift effect on hover for a shape I'm using as a background for both a picture and a text block.

Unfortunately, the shape only changes colour if I hover over it directly. And I'd like it to change when I'm hovering over every element of the ensemble.

But for the life of me, I cannot seem to find any answers anywhere.

I've used the following bit of code that I managed to pick up via Google search:

/* Change Shape Color on Hover */
#block-43365409002a16e44c9b .sqs-shape {-webkit-transition: .3s ease-in-out;-moz-transition: .3s ease-in-out;-o-transition: .3s ease-in-out;transition: .3s ease-in-out;} 

#block-43365409002a16e44c9b:hover .sqs-shape {background: #dda29a;}

For context, the block IDs are:
shape — #block-43365409002a16e44c9b
text — #block-yui_3_17_2_1_1698248534530_9660
image — #block-7e5a065df27c59db5d73

I've tried adding the other block IDs to the code, but it doesn't work. I apologise in advance, but CSS and code are just not something I've ever done before so it's all a foreign language to me.

So if anyone here can help me, I'd very much appreciate it.

Hi,

Can you share link to this page?

I would like to bring this question back to life.  Theolreverend did not answer the question, but #tuanphan, can you give us an answer anyways for a general situation? Thank you.

I solved a case 3 days ago, but I used script code, each case will require a different code. So if you share link to page where you have problem I can check easier.

On 3/18/2024 at 6:05 AM, SCSeal said:

I would like to bring this question back to life.  Theolreverend did not answer the question, but #tuanphan, can you give us an answer anyways for a general situation? Thank you.

@tuanphan I am trying to do the same thing and wondering if you could please share the script with me?

My site is:

https://sailfish-terrier-gzak.squarespace.com/?password=demo

I'm trying to get an effect like the one on this site: https://nubeusa.com/

But the image over the shape block is getting in the way.

Thanks so much!

@theolreverend Hi! Any chance you'd be able to share the solution you found for this issue? Thank you!

@ellen_b Hi! It would require some custom script. First, remove the following CSS code you added so they don’t conflict with the script.

#block-yui_3_17_2_1_1725477717770_24962 .sqs-shape {
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out
}

#block-yui_3_17_2_1_1725477717770_24962:hover .sqs-shape {
    background: #7ba9d3
}

#block-yui_3_17_2_1_1725486676720_18777 .sqs-shape {
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out
}

#block-yui_3_17_2_1_1725486676720_18777:hover .sqs-shape {
    background: #f5ccb2
}

#block-952e5f13cd471c2b8731 .sqs-shape {
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out
}

#block-952e5f13cd471c2b8731:hover .sqs-shape {
    background: #ceb769
}

#block-7357ec5bbf76add8e0c6 .sqs-shape {
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out
}

#block-7357ec5bbf76add8e0c6:hover .sqs-shape {
    background: #bec1e2
}

#block-b1015166f887121b4ebf .sqs-shape {
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out
}

#block-b1015166f887121b4ebf:hover .sqs-shape {
    background: #df9387
}

Then, add the following code in Website > Pages > Website Tools > Code Injection > Header to display the hove effect. 

<script>
document.addEventListener('DOMContentLoaded', function() {
  function applyHoverEffect(imageBlockSelect, shapeBlockSelect) {
    const image = document.querySelector(`${imageBlockSelect}`);
    const shapeDiv = document.querySelector(`${shapeBlockSelect} .sqs-shape`);
    const shapeBlock = document.querySelector(shapeBlockSelect);

    if (image && shapeDiv && shapeBlock) {
      image.addEventListener('mouseover', function() {
        shapeDiv.classList.add('show');
      });

      image.addEventListener('mouseout', function() {
        shapeDiv.classList.remove('show');
      });

      shapeBlock.addEventListener('mouseover', function() {
        shapeDiv.classList.add('show');
      });

      shapeBlock.addEventListener('mouseout', function() {
        shapeDiv.classList.remove('show');
      });
    }
  }
  // first add image block ID and then shape block ID
  applyHoverEffect('#block-03ad99557786dee44064', '#block-yui_3_17_2_1_1725477717770_24962');
  applyHoverEffect('#block-8f6d04cd5996fe903a94', '#block-952e5f13cd471c2b8731');
  applyHoverEffect('#block-d214b3d01fecc4ed41f5', '#block-7357ec5bbf76add8e0c6');
  applyHoverEffect('#block-0fe309f542647c166bc9', '#block-b1015166f887121b4ebf');
});
</script>

<style>
.sqs-shape {
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
} 
#block-yui_3_17_2_1_1725477717770_24962 .sqs-shape.show {
  background-color: #7ba9d3 !important;
}
#block-952e5f13cd471c2b8731 .sqs-shape.show {
    background: #ceb769 !important;
}  
#block-7357ec5bbf76add8e0c6 .sqs-shape.show {
    background: #bec1e2 !important;
}  
#block-b1015166f887121b4ebf .sqs-shape.show {
    background: #df9387 !important;
}    
</style>

I’ve written the custom script for the four blocks that have an image on top of the shape block. To apply the same hover effect to additional blocks, simply copy and paste this line of code and update the block IDs within the script.

applyHoverEffect('#block-0fe309f542647c166bc9', '#block-b1015166f887121b4ebf');

Also, in the <style> tag, copy and paste this block of code and replace the block ID with the ID of the shape block.

#block-b1015166f887121b4ebf .sqs-shape.show {
    background: #df9387 !important;
} 

@Lesum AMAZING! Thank you so much. If there are multiple blocks on top of the shapes (like an image block + a text block), would I just separate by commas in the script?

The only thing I noticed is that a little space has bene created between the top of the first section and the header (see screenshots). Does that have to do with this new code?

(Thanks again! Sending you ☕️💕)

@ellen_b Thanks so much!

The code will only work on a single block placed on top of the image. This block can be of any type—whether it's an image or text block. For multiple blocks, such as an image block and a text block, we need to modify the code a little bit.

Can you provide an example of a section where you want to apply a hover effect that contains multiple blocks stacked on top of a shape block?

Also, the space between the header and the first section wasn't there when I tested the code yesterday. Can you try removing the new code to see if that resolves the issue? If it doesn’t, you can add this code to the Custom CSS.

#page {
    margin-top: -18px;
}

@Lesum Weird, yeah that little space wasn't there yesterday. I removed the new code and it didn't go away, but the CSS worked!

As an example of multiple blocks on top of a shape, I've added a shape behind the text block and button in the "Ready to ditch...?" section near bottom of page (see screenshot). The block ID of that shape is #block-yui_3_17_2_1_1725733188880_15049 

PS - I just updated the domain, so wanted to make sure you have that: https://newnewshapesstudio.squarespace.com/?password=ellen

@ellen_b Hi! Here's the updated code. This version makes the code adaptable for cases where you have multiple blocks placed on top of the shape block, and you want all of them to trigger the same hover effect. Remove the previous code and replace it with the following:

<script>
document.addEventListener('DOMContentLoaded', function() {
  function applyHoverEffect(blockSelectors, shapeBlockSelector) {
    const shapeDiv = document.querySelector(`${shapeBlockSelector} .sqs-shape`);
    const shapeBlock = document.querySelector(shapeBlockSelector);

    if (shapeDiv && shapeBlock) {
      const blocks = blockSelectors.split(',').map(selector => selector.trim());

      blocks.forEach(function(blockSelector) {
        const block = document.querySelector(blockSelector);

        if (block) {
          // Hover effect on image block
          const image = block.querySelector('img');
          if (image) {
            image.addEventListener('mouseover', function() {
              shapeDiv.classList.add('show');
            });
            image.addEventListener('mouseout', function() {
              shapeDiv.classList.remove('show');
            });
          }

          // Add hover effect for the entire block
          block.addEventListener('mouseover', function() {
            shapeDiv.classList.add('show');
          });
          block.addEventListener('mouseout', function() {
            shapeDiv.classList.remove('show');
          });
        }
      });

      // Apply hover effect on shape block
      shapeBlock.addEventListener('mouseover', function() {
        shapeDiv.classList.add('show');
      });
      shapeBlock.addEventListener('mouseout', function() {
        shapeDiv.classList.remove('show');
      });
    }
  }
  
  applyHoverEffect('#block-03ad99557786dee44064', '#block-yui_3_17_2_1_1725477717770_24962');
  applyHoverEffect('#block-8f6d04cd5996fe903a94', '#block-952e5f13cd471c2b8731');
  applyHoverEffect('#block-d214b3d01fecc4ed41f5', '#block-7357ec5bbf76add8e0c6');
  applyHoverEffect('#block-0fe309f542647c166bc9', '#block-b1015166f887121b4ebf');
  
  applyHoverEffect('#block-yui_3_17_2_1_1725568940774_44968, #block-yui_3_17_2_1_1725568940774_48535', '#block-yui_3_17_2_1_1725733188880_15049');
});  
</script>

<style>
.sqs-shape {
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
} 

#block-yui_3_17_2_1_1725477717770_24962 .sqs-shape.show {
  background-color: #7ba9d3 !important;
}
#block-952e5f13cd471c2b8731 .sqs-shape.show {
    background: #ceb769 !important;
}  
#block-7357ec5bbf76add8e0c6 .sqs-shape.show {
    background: #bec1e2 !important;
}  
#block-b1015166f887121b4ebf .sqs-shape.show {
    background: #df9387 !important;
}
  
#block-yui_3_17_2_1_1725733188880_15049 .sqs-shape.show {
    background-color: #7ba9d3 !important;
}
</style>

Add the block IDs of the blocks you want to trigger the hover effect inside the first set of quotes, followed by commas. Then, add the block ID of the shape block inside the second set of quotes.

For example, in the code below, if you have three blocks that should trigger the hover effect, insert their block IDs in the first set of quotes, and the shape block’s ID in the second.

applyHoverEffect('#block1, #block2, #block3', '#shapeBlock');

@Lesum Brilliant! I LOVE how this effect turned out. Thank you so much!

@Lesum I'm wondering if it might be possible to exclude this effect from mobile, so the activated shape colors show up on mobile (without needing "hover")? An alternative I thought of was to add additional colored shapes to mobile that I then hide from desktop, which I know how to do, but it ends up being a lot of shapes haha 🤪 Maybe there's a more elegant way to do that with a media query in the original script? (Thank you!!)

@ellen_b Hi! Here’s a simpler version of the code that applies only to the desktop version. First, set the shape blocks to their original color, which is the same color you want to display on hover. Then, add this code. You don’t need to add any CSS; just add the block IDs, followed by commas, as mentioned in my previous comment.

<script>
document.addEventListener('DOMContentLoaded', function() {
  function applyHoverEffect(blockSelectors, shapeBlockSelector) {
    if (window.innerWidth > 1024) {
      const shapeDiv = document.querySelector(`${shapeBlockSelector} .sqs-shape`);
      const shapeBlock = document.querySelector(shapeBlockSelector);

      if (shapeDiv && shapeBlock) {
        shapeDiv.style.opacity = '0';
        shapeDiv.style.transition = 'opacity 0.2s ease-in-out';

        const blocks = blockSelectors.split(',').map(selector => selector.trim());

        blocks.forEach(function(blockSelector) {
          const block = document.querySelector(blockSelector);

          if (block) {
            const image = block.querySelector('img');
            if (image) {
              image.addEventListener('mouseover', function() {
                shapeDiv.style.opacity = '1';
              });
              image.addEventListener('mouseout', function() {
                shapeDiv.style.opacity = '0';
              });
            }

            block.addEventListener('mouseover', function() {
              shapeDiv.style.opacity = '1';
            });
            block.addEventListener('mouseout', function() {
              shapeDiv.style.opacity = '0';
            });
          }
        });

        shapeBlock.addEventListener('mouseover', function() {
          shapeDiv.style.opacity = '1';
        });
        shapeBlock.addEventListener('mouseout', function() {
          shapeDiv.style.opacity = '0';
        });
      }
    }
  }

  applyHoverEffect('#block-03ad99557786dee44064', '#block-yui_3_17_2_1_1725477717770_24962');
  applyHoverEffect('#block-8f6d04cd5996fe903a94', '#block-952e5f13cd471c2b8731');
  applyHoverEffect('#block-d214b3d01fecc4ed41f5', '#block-7357ec5bbf76add8e0c6');
  applyHoverEffect('#block-0fe309f542647c166bc9', '#block-b1015166f887121b4ebf');
  applyHoverEffect('#block-yui_3_17_2_1_1725568940774_44968, #block-yui_3_17_2_1_1725568940774_48535', '#block-yui_3_17_2_1_1725733188880_15049');
});
</script>