Buy me a coffee

Before-After Image (v2.Hover)


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

Click Text Show Image V2 01 Min

Click Text Show Image V2 02 Min

and 2 Image Blocks below.

Click Text Show Image V2 03 Min

#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

Hover Text Show Image 01 Min

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

<script src=""></script>
  // Before
  $("#block-yui_3_17_2_1_1714699207155_10055").closest('.fe-block').addClass('before show');
  // After
  // Before
// After
.before .image-block, .after .image-block {
    display: none;
  .show .image-block {
      display: block !important;
  .show {
      z-index: 999999 !important;

Hover Text Show Image 02 Min

#4. Explain code

Hover Text Show Image 03 Min