theolreverend Posted October 27, 2023 Share Posted October 27, 2023 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. Link to comment
tuanphan Posted October 29, 2023 Share Posted October 29, 2023 Hi, Can you share link to this page? 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
SCSeal Posted March 17 Share Posted March 17 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. ellen_b 1 Link to comment
tuanphan Posted March 21 Share Posted March 21 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
ellen_b Posted September 4 Share Posted September 4 @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! Link to comment
ellen_b Posted September 6 Share Posted September 6 @theolreverend Hi! Any chance you'd be able to share the solution you found for this issue? Thank you! Link to comment
Lesum Posted September 7 Share Posted September 7 @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
ellen_b Posted September 7 Share Posted September 7 @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 ☕️💕) Link to comment
Lesum Posted September 7 Share Posted September 7 @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
ellen_b Posted September 7 Share Posted September 7 (edited) @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 Edited September 8 by ellen_b Link to comment
Lesum Posted September 9 Share Posted September 9 @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
ellen_b Posted September 9 Share Posted September 9 @Lesum Brilliant! I LOVE how this effect turned out. Thank you so much! Lesum 1 Link to comment
ellen_b Posted September 11 Share Posted September 11 @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!!) Link to comment
Lesum Posted September 13 Share Posted September 13 @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
ellen_b Posted October 3 Share Posted October 3 @Lesum Somehow just seeing this now. You are the BEST! Thank you 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