Before / After

A drag-reveal comparison of two images sharing one frame. The visitor drags the divider to compare.

Section settings

• Before image / After image — The two images. Match their dimensions for a clean reveal.
• Before label / After label — Defaults "Before" / "After"; relabel to whatever the comparison actually is.
• Initial divider position — 10–90%, default 50.
• Width — small, medium, large, full.
• Padding top / bottom, Color scheme.

Blocks

Takes theme blocks for a header above the comparison.

Example use cases

• Raw / pressed. Blank deck against finished graphic — the print is the product, shown directly.
• Season one / season fifty. A wear comparison that sells durability without copy.

Notes

• The labels carry the meaning; "Before/After" defaults are rarely the right copy.
• Works with keyboard and touch; the divider is focusable.