Before-After Image (v2.Hover)

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

Password: abc

Suppose you have 2 Texts.

You want: when users hover on each Text > Show Image Block.

#1. First, you add a Text Block with some text/url.

Make sure the option “Open link in new tab” is disabled

• #before
• #after

and 2 Image Blocks below.

#2. Install Squarespace ID Finder to find the ID of the Image Block.

In my example, we will have:

• Left image: #block-yui_3_17_2_1_1714699207155_10055
• Right image: #block-yui_3_17_2_1_1714699207155_10718

#3. Use 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(){
  // Before
  $("#block-yui_3_17_2_1_1714699207155_10055").closest('.fe-block').addClass('before show');
  // After
$("#block-yui_3_17_2_1_1714699207155_10718").closest('.fe-block').addClass('after');
  
  // Before
  $('a[href="#before"]').hover(function(){
    $(".before").addClass("show");
    $('.fe-block:not(.before)').removeClass('show');
    }
  );
// After
 $('a[href="#after"]').hover(function(){
   $(".after").addClass("show");
    $('.fe-block:not(.after)').removeClass('show');
    }
  );
});
</script>
<style>
.before .image-block, .after .image-block {
    display: none;
}
  .show .image-block {
      display: block !important;
  }
  .show {
      z-index: 999999 !important;
  }
</style>

#4. Explain code