Drag the corner to peel back one image and reveal another underneath. Perfect for before + afters, transformations, portfolio reveals, or just a fun way to make visitors curious.
GO AHEAD. GIVE IT A PEEL. →
Give your images a little something extra.
Very Ap-PEEL-ing
IMAGE PEEL
Add an interactive image peel to your Showit website. Visitors can drag the corner of one image to peel it back and reveal a second image underneath.
WHAT YOU'LL NEED
Two images with the same aspect ratio. For the best result, use images with similar framing or subject placement. The images do not need to have the exact same pixel dimensions.
HOW TO INSTALL
01 — UPLOAD YOUR IMAGES
Upload your Before and After images to your Showit Media Library.
02 — COPY THE IMAGE LINKS
Select each image in your Media Library and copy its image link.
03 — ADD YOUR LINKS TO THE CODE
Open the supplied code and find the CUSTOMIZE HERE section near the top.
Replace the existing links beside:
BEFORE_IMAGE
AFTER_IMAGE
with the links you copied from Showit.
You only need to add the Before image once. The code automatically uses it to create the folded portion of the peel.
04 — CUSTOMIZE YOUR IMAGE PEEL
In the same section, you can optionally change:
STARTING_PEEL — Controls how much of the corner is already lifted when the page loads.
FOLD_DEPTH — Controls how far the folded corner extends.
SHADOW_STRENGTH — Controls the strength of the shadow along the fold.
You don't need to edit anything outside the customization section.
05 — ADD IT TO SHOWIT
Add an Embed Code box to your Showit canvas and paste the entire completed code into the box.
06 — SIZE YOUR IMAGE PEEL
Resize and position the Embed Code box just like any other Showit element.
07 — PREVIEW + TEST
Preview your site and drag from the top-right corner toward the bottom-left to peel away the first image and reveal the second.
Test both the desktop and mobile versions before publishing.
QUICK INFO
DIFFICULTY — Easy
REQUIRES — Embed Code + 2 images
MOBILE FRIENDLY — Yes
CODING KNOWLEDGE — Not required