Jump to content

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

Recommended Posts

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.

Screenshot 2023-10-27 110955.png

Screenshot 2023-10-27 111017.png

Link to comment
  • 4 months later...

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.

 

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
  • 5 months later...

@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;
} 

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@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 💕)

Screenshot 2024-09-07 at 7.38.33 AM.png

Screenshot 2024-09-07 at 7.38.26 AM.png

Link to comment

@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;
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@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

 

Screenshot 2024-09-07 at 11.24.03 AM.png

Edited by ellen_b
Link to comment

@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');

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@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!!)

Screenshot 2024-09-11 at 3.13.38 PM.png

Link to comment

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

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.