Jump to content

[Share] Simple Before-After Image

Recommended Posts

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

Pass: abc

If you can't make it work, you can share link to your site + which exact code did you add, I can check easier.

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

  • #before
  • #after

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




#2. Add 2 Image Blocks below Text


#3. 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_1714637665132_10256
  • Right image: #block-yui_3_17_2_1_1714637665132_10719


#4. 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>
  // Before
  $("#block-yui_3_17_2_1_1714637665132_10256").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;


#5. Explain code a bit


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Replies 0
  • Views 493
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.