Hover Client Text – Show Logo

Demo: https://tuanphan3.squarespace.com/hover-client-name-show-logo-1?noredirect

Password: abc

Suppose you have 5 client texts: Apple, Microsoft, Facebook, Instagram, and Google.

You want: when users hover on each client text > show a logo over + hide text, something like this.

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

#2. Add 5 Image Blocks over the Text Block (You can drag them to make a nice position).
In my example, I added these.

#3. Install Squarespace ID Finder tool (Free)

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

• Text Block: #block-yui_3_17_2_1_1709302191320_24592
• Apple: #block-yui_3_17_2_1_1709302191320_26267
• Microsoft: #block-yui_3_17_2_1_1709302191320_26851
• Facebook: #block-yui_3_17_2_1_1709302191320_27989
• Instagram: #block-yui_3_17_2_1_1709302191320_27419
• Google: #block-yui_3_17_2_1_1709302191320_28558

#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_1709302191320_24592 a[href="#apple"]').hover(function(){
    $("#block-yui_3_17_2_1_1709302191320_26267").addClass("show");
$(this).css('opacity','0');
    }, function(){
    $('#block-yui_3_17_2_1_1709302191320_26267').removeClass("show");
$(this).css('opacity','1');
    }
  );
// Microsoft
 $('#block-yui_3_17_2_1_1709302191320_24592 a[href="#microsoft"]').hover(function(){
    $("#block-yui_3_17_2_1_1709302191320_26851").addClass("show");
$(this).css('opacity','0');
    }, function(){
    $('#block-yui_3_17_2_1_1709302191320_26851').removeClass("show");
$(this).css('opacity','1');
    }
  );
  // Facebook 
   $('#block-yui_3_17_2_1_1709302191320_24592 a[href="#facebook"]').hover(function(){
    $("#block-yui_3_17_2_1_1709302191320_27989").addClass("show");
$(this).css('opacity','0');
    }, function(){
    $('#block-yui_3_17_2_1_1709302191320_27989').removeClass("show");
$(this).css('opacity','1');
    }
  );
// Instagram
  $('#block-yui_3_17_2_1_1709302191320_24592 a[href="#instagram"]').hover(function(){
    $("#block-yui_3_17_2_1_1709302191320_27419").addClass("show");
$(this).css('opacity','0');
    }, function(){
    $('#block-yui_3_17_2_1_1709302191320_27419').removeClass("show");
$(this).css('opacity','1');
    }
  );
 // Google
  $('#block-yui_3_17_2_1_1709302191320_24592 a[href="#google"]').hover(function(){
    $("#block-yui_3_17_2_1_1709302191320_28558").addClass("show");
$(this).css('opacity','0');
    }, function(){
    $('#block-yui_3_17_2_1_1709302191320_28558').removeClass("show");
$(this).css('opacity','1');
    }
  );
});
</script>
<style>
#block-yui_3_17_2_1_1709302191320_28558, #block-yui_3_17_2_1_1709302191320_27419, #block-yui_3_17_2_1_1709302191320_27989, #block-yui_3_17_2_1_1709302191320_26851, #block-yui_3_17_2_1_1709302191320_26267 {
  opacity: 0;
  transition: all 0.1s ease;
  }
  .show {
  opacity: 1 !important;
     transition: all 0.1s ease;
  }
</style>

#5. Explain