[Share] Hover Text - Show Image behind text

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

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! 

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?

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 

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

Hi @tuanphan, 

Awesome! Thank you. I've done done the following: 

1. Added each service as an individual text block
2. Changed all the links to '/services' since they all should link to the same page
3. 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! 

Hi @tuanphan, are you still able to help me with the above? 
Many thanks 🙂 

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

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. 🙂

@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

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

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

#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

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

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>

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!
 

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