Let’s build a Before / After Image Block in our Squarespace website. As we hover our mouse over an image, this code will show a different image.
Timestamps:
0:11 – Tutorial Overview
0:36 – Installing the Code
2:20 – Before / After Pro Plugin
3:04 – Writing the code
Links:
Code: https://www.will-myers.com/articles/before-after-slider-for-your-squarespace-website
Plugin Store: https://www.will-myers.com/products
Learn CSS: https://www.will-myers.com/learn-css-in-squarespace
Support Me: https://www.buymeacoffee.com/willmyers
Installing the code:
1. Add in an image block and add your BEFORE image into it.
2. Paste the below CSS into your Design » Custom CSS area.
3. Grab the BLOCK ID of the image block you added in step 1 and replace the first line in the CSS you just added.
4. Upload your AFTER image into the Design » Custom CSS » Manage Custom Files area.
5. Replace the IMAGE_URL in the CSS with the URL of your AFTER Image.
