Hover Text show Image behind

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

Password: abc

Suppose you have 4 texts: Design, Copywriting, SEO and Digital

You want: when users hover on each text, show an image behind, like this screenshot.

#1. First, you add a Text Block with 4 text/URL

• Design – /design
• Copywriting – /copywriting
• SEO – /seo
• Digital – /digital

#2.  Add 4 Image Blocks behind the Text, and add text: hover-img to ALT

#3. Use this tool to find the Image Blocks ID

In my example, we will have IDs

• Design: #block-yui_3_17_2_1_1719720181370_16297
• Copywriting: #block-yui_3_17_2_1_1719720181370_16962
• SEO: #block-yui_3_17_2_1_1719720181370_19036
• Digital: #block-yui_3_17_2_1_1719720181370_23869

#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(){
  // Design
  $('div.html-block a[href="/design"]').hover(function(){
    $("#block-yui_3_17_2_1_1719720181370_16297").addClass("show");
    }, function(){
    $('#block-yui_3_17_2_1_1719720181370_16297').removeClass("show");
    }
  );
// Copywriting
 $('div.html-block a[href="/copywriting"]').hover(function(){
    $("#block-yui_3_17_2_1_1719720181370_16962").addClass("show");
    }, function(){
    $('#block-yui_3_17_2_1_1719720181370_16962').removeClass("show");
    }
  );
  // SEO
   $('div.html-block a[href="/seo"]').hover(function(){
    $("#block-yui_3_17_2_1_1719720181370_19036").addClass("show");
    }, function(){
    $('#block-yui_3_17_2_1_1719720181370_19036').removeClass("show");
    }
  );
// Digital
  $('div.html-block a[href="/digital"]').hover(function(){
    $("#block-yui_3_17_2_1_1719720181370_23869").addClass("show");
    }, function(){
    $('#block-yui_3_17_2_1_1719720181370_23869').removeClass("show");
    }
  );
});
</script>
<style>
div.sqs-block:has(img[alt*="hover-img"]) {
  opacity: 0;
  transition: all 0.1s ease;
}
.fe-block:has(.html-block) {
position: relative;
z-index: 99999 !important;
}
  .show {
  opacity: 1 !important;
     transition: all 0.1s ease;
  }
</style>

#5. Explain code