tuanphan Posted March 16 Share Posted March 16 Suppose you have 5 texts: Apple, Microsoft, Facebook, Instagram, and Google. You want: when users hover on each text, show an image behind, like this screenshot. Demo: https://tuanphan3.squarespace.com/hover-text-show-image-behind?noredirect Pass: abc #1. First, you add a Text Block with 5 text/URL Apple – #apple Microsoft – #microsoft Facebook – #facebook Instagram – #instagram Google – #google and make sure the option “Open link in New Tab” is disabled. #2. Add 5 Image Blocks behind the Text #3. Use this tool to find Text, Image Blocks ID https://chromewebstore.google.com/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff In my example, we will have Text Block: #block-200f229f8bf967034586 Apple: #block-6c22f2b71794efe0bf90 Microsoft: #block-46ac1cf920079afb418c Facebook: #block-cae0161064e6a95c79f8 Instagram: #block-15061c8406f682c95563 Google: #block-7b82834e5286ad62735c NOTE: Text Block, it will have 2 IDs ID 1: #block-200f229f8bf967034586 ID 2: .fe-block-200f229f8bf967034586 (Just replace #block in ID 1 to .fe-block, you will have ID2) #4. Use code to Page Header Code Injection or Code Injection Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ // Apple $('#block-200f229f8bf967034586 a[href="#apple"]').hover(function(){ $("#block-6c22f2b71794efe0bf90").addClass("show"); }, function(){ $('#block-6c22f2b71794efe0bf90').removeClass("show"); } ); // Microsoft $('#block-200f229f8bf967034586 a[href="#microsoft"]').hover(function(){ $("#block-46ac1cf920079afb418c").addClass("show"); }, function(){ $('#block-46ac1cf920079afb418c').removeClass("show"); } ); // Facebook $('#block-200f229f8bf967034586 a[href="#facebook"]').hover(function(){ $("#block-cae0161064e6a95c79f8").addClass("show"); }, function(){ $('#block-cae0161064e6a95c79f8').removeClass("show"); } ); // Instagram $('#block-200f229f8bf967034586 a[href="#instagram"]').hover(function(){ $("#block-15061c8406f682c95563").addClass("show"); }, function(){ $('#block-15061c8406f682c95563').removeClass("show"); } ); // Google $('#block-200f229f8bf967034586 a[href="#google"]').hover(function(){ $("#block-7b82834e5286ad62735c").addClass("show"); }, function(){ $('#block-7b82834e5286ad62735c').removeClass("show"); } ); }); </script> <style> #block-7b82834e5286ad62735c, #block-15061c8406f682c95563, #block-cae0161064e6a95c79f8, #block-46ac1cf920079afb418c, #block-6c22f2b71794efe0bf90 { opacity: 0; transition: all 0.1s ease; } .fe-block-200f229f8bf967034586 { position: relative; z-index: 99999 !important; } .fe-block-200f229f8bf967034586 * { border: none !important; text-decoration: none !important; } .show { opacity: 1 !important; transition: all 0.1s ease; } </style> #5. Explain code a bit jmerrill and holahannah 1 1 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
holahannah Posted June 29 Share Posted June 29 Hi @tuanphan, thank you for this tutorial. I was looking for ages for a plugin or tutorial explaining how to achieve this effect, and this works so well. I've put it to action here, in the 'Service Offerings' section towards the bottom of the page: https://beseensocials.squarespace.com/ password: bandit I have a question regarding the layering of the images. Is it possible with your code to have the image only behind the text correlating with the image (and then the image overlaps the other non-active links)? Like the screenshot attached. So the Influencer image, is behind the 'Influencers' text, but overlays the 'Content Creation' and 'Social Media Management' texts. Or would I need to create a separate text block for each of these? Great tutorial, for a cool effect, thank you! Link to comment
tuanphan Posted June 30 Author Share Posted June 30 6 hours ago, holahannah said: Hi @tuanphan, thank you for this tutorial. I was looking for ages for a plugin or tutorial explaining how to achieve this effect, and this works so well. I've put it to action here, in the 'Service Offerings' section towards the bottom of the page: https://beseensocials.squarespace.com/ password: bandit I have a question regarding the layering of the images. Is it possible with your code to have the image only behind the text correlating with the image (and then the image overlaps the other non-active links)? Like the screenshot attached. So the Influencer image, is behind the 'Influencers' text, but overlays the 'Content Creation' and 'Social Media Management' texts. Or would I need to create a separate text block for each of these? Great tutorial, for a cool effect, thank you! #1. You will need to use 5 Texts in 5 Text Blocks, then we can achieve your request by changing z-index attribute (will change code a bit) #2. An additional question, do you need to make these texts clickable to new 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
holahannah Posted July 2 Share Posted July 2 Hi @tuanphan, thanks for your reply. Ok - so I should change them to 5 separate text blocks? The texts just need to click through to the "Services" page. Is this possible? Thank you Link to comment
tuanphan Posted July 6 Author Share Posted July 6 On 7/3/2024 at 1:42 AM, holahannah said: Hi @tuanphan, thanks for your reply. Ok - so I should change them to 5 separate text blocks? The texts just need to click through to the "Services" page. Is this possible? Thank you #1. You can change to 5 Text Blocks, I will test & give new code #2. Instead of using #apple #...in step 1, you can enter real url, for example /apple, /microsoft and adjust these 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
holahannah Posted July 7 Share Posted July 7 Hi @tuanphan, Awesome! Thank you. I've done done the following: Added each service as an individual text block Changed all the links to '/services' since they all should link to the same page Updated the #block ids to match the new individual text blocks So it looks to be working, I guess we need to do something with the z-indexes to get that layering effect? Here is my updated code for reference: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ // UGC $('#block-23339ece2c22d6b92223 a[href="/services"]').hover(function(){ $("#block-f6e68d478332e15aeb0f").addClass("show"); }, function(){ $('#block-f6e68d478332e15aeb0f').removeClass("show"); } ); // Events $('#block-944cfafbc32dfe43303a a[href="/services"]').hover(function(){ $("#block-a6479a8dc0ec609e973e").addClass("show"); }, function(){ $('#block-a6479a8dc0ec609e973e').removeClass("show"); } ); // Content Creation $('#block-c85b10bab9dfb1aadd8e a[href="/services"]').hover(function(){ $("#block-9c5ff1805beb149480ba").addClass("show"); }, function(){ $('#block-9c5ff1805beb149480ba').removeClass("show"); } ); // Influencers $('#block-f1ccd03aeab72bf3601c a[href="/services"]').hover(function(){ $("#block-1e2eeee6b68cb4f6fe41").addClass("show"); }, function(){ $('#block-1e2eeee6b68cb4f6fe41').removeClass("show"); } ); // Social Media $('#block-289c03331e84f635bdbe a[href="/services"]').hover(function(){ $("#block-57a76816f07e19e72171").addClass("show"); }, function(){ $('#block-57a76816f07e19e72171').removeClass("show"); } ); }); </script> <style> #block-f6e68d478332e15aeb0f, #block-a6479a8dc0ec609e973e, #block-9c5ff1805beb149480ba, #block-1e2eeee6b68cb4f6fe41, #block-57a76816f07e19e72171 { opacity: 0; transition: all 0.1s ease; } .fe-block-23339ece2c22d6b92223 { position: relative; z-index: 99999 !important; } .fe-block-23339ece2c22d6b92223 * { border: none !important; text-decoration: none !important; } .show { opacity: 1 !important; transition: all 0.1s ease; } </style> Thank you! Link to comment
holahannah Posted July 11 Share Posted July 11 Hi @tuanphan, are you still able to help me with the above? Many thanks 🙂 Link to comment
tuanphan Posted July 13 Author Share Posted July 13 Change your code to this <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ // UGC $('#block-23339ece2c22d6b92223 a[href="/services"]').hover(function(){ $("#block-f6e68d478332e15aeb0f").addClass("show"); $(this).addClass('layer-index'); }, function(){ $('#block-f6e68d478332e15aeb0f').removeClass("show"); $(this).removeClass('layer-index'); } ); // Events $('#block-944cfafbc32dfe43303a a[href="/services"]').hover(function(){ $("#block-a6479a8dc0ec609e973e").addClass("show"); $(this).addClass('layer-index'); }, function(){ $('#block-a6479a8dc0ec609e973e').removeClass("show"); $(this).removeClass('layer-index'); } ); // Content Creation $('#block-c85b10bab9dfb1aadd8e a[href="/services"]').hover(function(){ $("#block-9c5ff1805beb149480ba").addClass("show"); $(this).addClass('layer-index'); }, function(){ $('#block-9c5ff1805beb149480ba').removeClass("show"); $(this).removeClass('layer-index'); } ); // Influencers $('#block-f1ccd03aeab72bf3601c a[href="/services"]').hover(function(){ $("#block-1e2eeee6b68cb4f6fe41").addClass("show"); $(this).addClass('layer-index'); }, function(){ $('#block-1e2eeee6b68cb4f6fe41').removeClass("show"); $(this).removeClass('layer-index'); } ); // Social Media $('#block-289c03331e84f635bdbe a[href="/services"]').hover(function(){ $("#block-57a76816f07e19e72171").addClass("show"); $(this).addClass('layer-index'); }, function(){ $('#block-57a76816f07e19e72171').removeClass("show"); $(this).removeClass('layer-index'); } ); }); </script> <style> #block-f6e68d478332e15aeb0f, #block-a6479a8dc0ec609e973e, #block-9c5ff1805beb149480ba, #block-1e2eeee6b68cb4f6fe41, #block-57a76816f07e19e72171 { opacity: 0; transition: all 0.1s ease; } .fe-block-23339ece2c22d6b92223 { position: relative; z-index: 99999 !important; } .fe-block-23339ece2c22d6b92223 * { border: none !important; text-decoration: none !important; } .show { opacity: 1 !important; transition: all 0.1s ease; } .fe-block:has(.show) { z-index: 99999999 !important; position: relative !important; } .fe-block:has(.layer-index) { z-index: 999999999999999 !important; position: relative !important; } </style> If it still doesn't work, you can keep new code, I can check easier holahannah 1 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
holahannah Posted July 15 Share Posted July 15 Hello @tuanphan, This works perfectly! https://beseensocials.squarespace.com/ password: bandit Thank you for all your help. This tutorial will be really useful in the future as well. 🙂 Link to comment
jmerrill Posted July 17 Share Posted July 17 @tuanphan Love your share here. Is there any way to have the image display above the text on the z index? URL: https://artdomain.co/about Link to comment
tuanphan Posted July 17 Author Share Posted July 17 1 hour ago, jmerrill said: @tuanphan Love your share here. Is there any way to have the image display above the text on the z index? URL: https://artdomain.co/about You can read this comment I added layer-index If you still can't make it work, you can send exact code you added, I will adjust & give new code 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
jmerrill Posted July 17 Share Posted July 17 @tuanphan Here's the code I added to my page - not quite working yet. Also, one last tweak request: Is there a way to have the image follow the cursor when hovering over text? URL: https://artdomain.co/about <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ // redford $('#block-yui_3_17_2_1_1707952103266_14731 a[href="#redford"]').hover(function(){ $("#block-yui_3_17_2_1_1721156617453_16796").addClass("show"); $(this).addClass('layer-index'); }, function(){ $('#block-yui_3_17_2_1_1721156617453_16796').removeClass("show"); $(this).removeClass('layer-index'); } ); }); </script> <style> #block-yui_3_17_2_1_1721156617453_16796 { opacity: 0; transition: all 0.1s ease; } .fe-block-yui_3_17_2_1_1707952103266_14731 { position: relative; z-index: 99999 !important; } .fe-block-yui_3_17_2_1_1707952103266_14731 * { border: none !important; text-decoration: none !important; } .show { opacity: 1 !important; transition: all 0.1s ease; } .fe-block:has(.layer-index) { z-index: 999999999999999 !important; position: relative !important; } </style> Link to comment
tuanphan Posted July 17 Author Share Posted July 17 #1. Sorry, I checked wrong ID Remove red 1, 2 and replace red 3 with this code .fe-block:has(.show) { z-index: 99999999 !important; position: relative !important; } #2. The image will be in fixed position, making it follow the cursor will require more complex code. I haven't tried it yet so not sure if it's possible or not, but basically the idea would be remove above code Use <script> code to move image tag into nod of recognition link tag Set new script code for effect If you want to try, you can remove above <script> code, I will try testing some code 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
jmerrill Posted July 17 Share Posted July 17 @tuanphan Great thank you. This works and I think I'll just stick with this. Last request, can I disable the text showing as a link on mobile, since hovers won't work anyway? Link to comment
tuanphan Posted July 19 Author Share Posted July 19 On 7/17/2024 at 9:57 PM, jmerrill said: @tuanphan Great thank you. This works and I think I'll just stick with this. Last request, can I disable the text showing as a link on mobile, since hovers won't work anyway? About url doesn't work now. Can you check it again? But I guess you can add this CSS under your code <style> #block-yui_3_17_2_1_1707952103266_14731 a[href="#redford"] { background-image: none !important; text-decoration: none !important; border: none !important; } </style> jmerrill 1 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
AshleyWeinaug Posted August 28 Share Posted August 28 Hi Tuan! I saw your below tutorial to make an image appear upon link hover and have tried to put it into effect but I'm running into some issues. The area of my website I am trying to edit is at the very bottom before the footer. It has city names listed out and an image next to it. I originally was trying to change the image to the right when you hover over each city (which is a link). I'm not sure that is possible, so when I found this tutorial, I shifted to trying to just get the image to appear when you hover over each text link versus always being there on the page. I know how to find the block id for the text that is on the site but where would I get the block ID of the image if the image only appears on hover? I appreciate your help! Link to comment
tuanphan Posted August 29 Author Share Posted August 29 23 hours ago, AshleyWeinaug said: Hi Tuan! I saw your below tutorial to make an image appear upon link hover and have tried to put it into effect but I'm running into some issues. The area of my website I am trying to edit is at the very bottom before the footer. It has city names listed out and an image next to it. I originally was trying to change the image to the right when you hover over each city (which is a link). I'm not sure that is possible, so when I found this tutorial, I shifted to trying to just get the image to appear when you hover over each text link versus always being there on the page. I know how to find the block id for the text that is on the site but where would I get the block ID of the image if the image only appears on hover? I appreciate your help! You need to make all images appears first, then use below code to find ID 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment