Hover Image – Show Text v2

Demo: https://tuanphan-demo01.squarespace.com/hover-image-show-text-v2?noredirect

Password: abc

Suppose you have 4 images. When users hover over each image, you want: the image on the right (or anywhere) will appear.

#1. First, add 4 images on the left – and 4 texts on the right

#2. Install Squarespace ID Finder to find the ID of Image and Text Blocks

In my example, we will have:

Apple image: #block-a16f28dd42da9145711d
Google image: #block-9a5aeea61fa370ac4107
Microsoft image: #block-cf9c87c8d6ee3e3d0eb4
Instagram image: #block-66dfef9aa2bb029a9678

Apple text: #block-e69361f90a576038c4bf
Google text: #block-1af8266848d89912cc72
Microsoft image: #block-3d169036addfa212ffdc
Instagram text: #block-214fb4e9d9e6daf1aabd

#3. Use this code to Code Injection – Footer (or Page Header Code Injection)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $("#block-e69361f90a576038c4bf").addClass("show");
  // Apple
  $('#block-a16f28dd42da9145711d').hover(function(){
    $("#block-e69361f90a576038c4bf").addClass("show");
    }, function(){
    $('#block-e69361f90a576038c4bf').removeClass("show");
    }
  );
// Google
 $('#block-9a5aeea61fa370ac4107').hover(function(){
    $("#block-1af8266848d89912cc72").addClass("show");
    }, function(){
    $('#block-1af8266848d89912cc72').removeClass("show");
    }
  );
  // Microsoft
   $('#block-cf9c87c8d6ee3e3d0eb4').hover(function(){
    $("#block-3d169036addfa212ffdc").addClass("show");
    }, function(){
    $('#block-3d169036addfa212ffdc').removeClass("show");
    }
  );
 // Instagram
  $('#block-66dfef9aa2bb029a9678').hover(function(){
    $("#block-214fb4e9d9e6daf1aabd").addClass("show");
    }, function(){
    $('#block-214fb4e9d9e6daf1aabd').removeClass("show");
    }
  );
});
</script>
<style>
#block-e69361f90a576038c4bf, #block-1af8266848d89912cc72, #block-3d169036addfa212ffdc, #block-214fb4e9d9e6daf1aabd {
  display: none;
  }
  .show {
  display: block !important;
  }
</style>

#4. Explain code

Ask me a question, free