How to do Before and After pictures in Squarespace?

To do Before and After pictures in Squarespace, you can follow these steps.

  • When users hover on Before or After text, will show corresponding pictures under.
  • You can also use this Before After Slider free widget or Before After Plugin (paid) to achieve this without using code.
  • If you can’t make it work, you can comment below/message me/email me with site url, I can help easier.

#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=""></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;

#4. Explain code