Buy me a coffee

Hover text – Show image on right

Demo: https://tuanphan3.squarespace.com/hover-text-show-image-example?noredirect
Pass: abc

Suppose you have 5 texts: Apple, Microsoft, Facebook, Instagram, and Google.
You want: when users hover on each text > show an image on the right side, something like this.

Hover Text Show More Text On Right 01 Min

#1. First, add a Text Block with 5 Paragraph, then add these URLs

  • Apple – #apple
  • Microsoft – #microsoft
  • Facebook – #facebook
  • Instagram – #instagram
  • Google – #google

and make sure “Open Link in new tab” is DISABLED.

Hover Text Show More Text On Right 02 Min

Hover Text Show More Text On Right 03 Min

Hover Text Show More Text On Right 06 Min

Hover Text Show More Text On Right 07 Min

 

 

Hover Text Show More Text On Right 06 Min

#2. Add 5 Image Blocks on the right side (You can drag them to make them overlap together then, or keep the current position if you want).

Hover Text Show More Text On Right 07 Min

#3. Install Squarespace ID Finder tool (Free)

Hover Text Show More Text On Right 08 Min

Then, you can find the ID of 5 Image Blocks and Text Block with the tool. In this example, we will have

  • Section ID: section[data-section-id=”65ddb0e3774fbc5683717e39″]
  • Text Block: #block-yui_3_17_2_1_1709027479615_23578
  • Apple Image: #block-yui_3_17_2_1_1709027479615_25260
  • Microsoft: #block-yui_3_17_2_1_1709027479615_25837
  • Facebook: #block-yui_3_17_2_1_1709027479615_26404
  • Instagram: #block-yui_3_17_2_1_1709027479615_26980
  • Google: #block-yui_3_17_2_1_1709027479615_27455

Hover Text Show More Text On Right 09 Min

#4. Use this code to 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-yui_3_17_2_1_1709027479615_23578 a[href="#apple"]').hover(function(){
    $("#block-yui_3_17_2_1_1709027479615_25260").addClass("show");
    }, function(){
    $('#block-yui_3_17_2_1_1709027479615_25260').removeClass("show");
    }
  );
// Microsoft
 $('#block-yui_3_17_2_1_1709027479615_23578 a[href="#microsoft"]').hover(function(){
    $("#block-yui_3_17_2_1_1709027479615_25837").addClass("show");
    }, function(){
    $('#block-yui_3_17_2_1_1709027479615_25837').removeClass("show");
    }
  );
  // Facebook 
   $('#block-yui_3_17_2_1_1709027479615_23578 a[href="#facebook"]').hover(function(){
    $("#block-yui_3_17_2_1_1709027479615_26404").addClass("show");
    }, function(){
    $('#block-yui_3_17_2_1_1709027479615_26404').removeClass("show");
    }
  );
// Instagram
  $('#block-yui_3_17_2_1_1709027479615_23578 a[href="#instagram"]').hover(function(){
    $("#block-yui_3_17_2_1_1709027479615_26980").addClass("show");
    }, function(){
    $('#block-yui_3_17_2_1_1709027479615_26980').removeClass("show");
    }
  );
 // Google
  $('#block-yui_3_17_2_1_1709027479615_23578 a[href="#google"]').hover(function(){
    $("#block-yui_3_17_2_1_1709027479615_27455").addClass("show");
    }, function(){
    $('#block-yui_3_17_2_1_1709027479615_27455').removeClass("show");
    }
  );
});
</script>
<style>
 #block-yui_3_17_2_1_1709027479615_25837, #block-yui_3_17_2_1_1709027479615_25837, #block-yui_3_17_2_1_1709027479615_26404, #block-yui_3_17_2_1_1709027479615_26980, #block-yui_3_17_2_1_1709027479615_27455, #block-yui_3_17_2_1_1709027479615_25260 {
  opacity: 0;
  transition: all 0.1s ease;
  }
  .show {
  opacity: 1 !important;
     transition: all 0.1s ease;
  }
</style>

Hover Text Show More Text On Right 12 Min

#5. Explain
First code contains Text, Image Block ID

Hover Text Show More Text On Right 10 Min

Second code:

Hover Text Show More Text On Right 11 Min