Jump to content

client logo appears over text on hover

Recommended Posts

  • Replies 1
  • Views 1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

This will require some steps, you can follow this quick guide. If you still can't make it work, you can share link to page where you added text + image, I can check it again easier.

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

Pass: 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.

hover-text-show-more-text-on-right-02-min.jpg.ff3785241d13e073b6b0490898142db5.jpg

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

hover-client-text-show-logo-04-min.thumb.jpg.181cccf2afcebc2c223512707d4c7796.jpg

#3. Use this free tool to find ID of Text and Image Blocks

https://chromewebstore.google.com/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

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

hover-client-text-show-logo-05-min.jpg.a9ada02ab32dedaee15c59bf0cace989.jpg

#4. Use this code to Website > Website Tools > 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>

hover-client-text-show-logo-06-min.png.90815b5cc71b82497628869b1d9a2b25.png

#5. Explain a bit

hover-client-text-show-logo-07-min.jpg.c02656dbe707b2a729d5886c5cd03620.jpg

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.