Hover Text – Show Image behind text

Demo: https://tuanphan3.squarespace.com/hover-text-show-image-behind?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 behind, like this screenshot.

#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
You will have (each site will have different IDs)

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 this code to Page Header Code Injection

<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;
}
  .show {
  opacity: 1 !important;
     transition: all 0.1s ease;
  }
</style>

#5. Explain code

Ask me a question, free