Image comparison section with 4 variants - interactive slider, stacking, overlay, and center features.
Before / After
The Before / After section allows you to compare two images (before/after) in an interactive way. With 4 different display modes, it adapts to any type of comparison: product transformation, skincare results, renovation, photo retouching, etc.
4 Variants
| Variant | Description | Ideal for |
|---|---|---|
| Slider | Draggable cursor to reveal the image | Direct comparisons, transformations |
| Stacked | Stacked images with before/after navigation | Elegant presentations, testimonials |
| Overlay | Image revealed on hover/tap | Dramatic effects, surprises |
| Center Features | Central slider + features on each side | Product pages, showcasing benefits |
Main Settings
Images
| Setting | Description | Default |
|---|---|---|
| Before image | Left / bottom image | - |
| After image | Right / top image | - |
| Image ratio | Image proportions | Adapt / Square / Landscape / Wide / 16:9 / Portrait / Portrait Tall |
| Image shape | Image edges | Square / Rounded / Circle |
Labels
| Setting | Description | Default |
|---|---|---|
| Show labels | Show Before/After labels | Off |
| Before label | Left label text | "Before" |
| After label | Right label text | "After" |
Slider (Slider and Center Features modes)
| Setting | Description | Options | Default |
|---|---|---|---|
| Initial position | Cursor position on load | 10-90% | 50% |
Stacked (Stacked mode)
| Setting | Description | Options | Default |
|---|---|---|---|
| Layout | Content layout | With content / Full width | With content |
| Arrangement | Image arrangement | Side by side / Diagonal / Diagonal reverse | Side by side |
| Rotation | Image tilt | 0-15deg | 5deg |
| Offset | Offset between images | 0-100px | 20px |
| Arrows | Show navigation arrows | On / Off | On |
| Before text | Text on the before arrow | "Before" | |
| After text | Text on the after arrow | "After" |
Overlay (Overlay mode)
| Setting | Description | Options | Default |
|---|---|---|---|
| Reveal direction | Direction of the hover effect | Left / Right / Top / Bottom / Fade | Left |
| Show indication | Hover/tap indication text | On / Off | On |
| Hover text | Message for desktop | "Hover to reveal" | |
| Tap text | Message for mobile | "Tap to reveal" |
Available Blocks
Content Blocks (Slider, Stacked, Overlay modes)
| Block | Description |
|---|---|
| Heading | Main section title |
| Text | Descriptive paragraph |
| Button | CTA button |
| Testimonial | Customer quote with author |
| Icon List | Benefits list with icons |
Feature Block (Center Features mode)
| Field | Description |
|---|---|
| Icon | Material Design icon |
| Custom icon | Image to replace the icon |
| Title | Feature name |
| Description | Descriptive text |
| Icon color | Accent 1 / Accent 2 / Foreground / Custom |
| Column | Left or Right (determines which side of the slider the feature appears on) |
Use Cases
Skincare / Beauty Results
- Slider mode with initial position at 30% (shows more of the "before" image)
- Labels enabled: "Before treatment" / "After 4 weeks"
- Blocks: Heading + Text + Button to the product
- Portrait image ratio for face photos
Renovation / Interior Design
- Stacked mode with Diagonal arrangement
- Rotation at 5deg for a dynamic effect
- Testimonial block with customer review
- With content layout for context
Technical Comparison
- Center Features mode with 3-4 features per side
- Left column: limitations of the old product
- Right column: advantages of the new product
- Slider position at 50% for a balanced comparison
Product Teasing
- Overlay mode with Fade direction
- "Before" image = silhouette or teaser
- "After" image = revealed product
- Indication enabled: "Hover to discover"
💡For Slider mode, adjust the initial position to guide attention: at 30%, the user sees mostly the "before" image and is encouraged to slide to discover the "after." This is more engaging than a 50/50 split.
⚠️Use images with the same dimensions for both photos (before/after). Images of different sizes can create visual misalignment, especially in Slider mode. The Adapt ratio uses the "before" image dimensions as reference.
ℹ️The Center Features mode is unique to Scale Theme. It combines the visual power of comparison with a structured presentation of benefits -- perfect for product pages or conversion landing pages.