No. 06 of 106

Image Comparison

Before / after photos with a drag handle.

    On this page
  1. Drag to reveal the difference
  2. Slide it up and down
  3. No clicking. Just hover
  4. One tap to switch
  5. Let it sweep on its own
Mode 01 · Drag Slider

The classic before/after with a circular handle, soft shadow frame, hint animation on scroll-in and full keyboard support.

Website redesign — NewsOn Before After
Website redesignFrom a cluttered 2005 layout to a clean, conversion-ready homepage.
Mobile app UI — NewsOn Before After
Mobile app UIA crowded screen turned into a calm, thumb-friendly experience.
Mode 01 · Vertical Direction

Switch the direction to vertical for tall subjects and mobile screens. Pill-grip handle, gradient frame.

Mobile app UI — NewsOn Before After
Mobile app UIA crowded screen turned into a calm, thumb-friendly experience.
Brand identity — NewsOn Before After
Brand identityA dated logo lock-up refreshed into a modern, scalable brand mark.
Mode 02 · Follow Mouse

The divider follows the cursor — a fast, friction-free way to compare. Glass ring handle over a white-border frame.

Photo color grade — NewsOn Before After
Photo color gradeFlat, dull footage graded into a vivid golden-hour look.
Data dashboard — NewsOn Before After
Data dashboardA spreadsheet wall turned into a dashboard people actually read.
Mode 03 · Click Toggle

A smooth wipe between the two states with a Before / After switch. Ideal for mobile and for showing full-frame changes.

Website redesign — NewsOn Before After
Website redesignFrom a cluttered 2005 layout to a clean, conversion-ready homepage.
Brand identity — NewsOn Before After
Brand identityA dated logo lock-up refreshed into a modern, scalable brand mark.
Product page — NewsOn Before After
Product pageA plain listing rebuilt to sell — bigger visuals, clearer buy button.
Mode 04 · Auto Sweep

The divider glides back and forth automatically — hover to take control. Gradient bar handle on a dark card.

Product page — NewsOn Before After
Product pageA plain listing rebuilt to sell — bigger visuals, clearer buy button.
Data dashboard — NewsOn Before After
Data dashboardA spreadsheet wall turned into a dashboard people actually read.
Mode 05 · Magic Lens

A circular lens follows your cursor and reveals the after image inside it — a memorable way to inspect retouching and detail.

Photo color grade — NewsOn Before After Move over the image
Photo color gradeFlat, dull footage graded into a vivid golden-hour look.
Website redesign — NewsOn Before After Move over the image
Website redesignFrom a cluttered 2005 layout to a clean, conversion-ready homepage.
Mode 06 · Cross-fade

Instead of a hard wipe the images blend into each other as you drag — perfect for lighting, color and time-lapse comparisons.

Photo color grade — NewsOn Before After
Photo color gradeFlat, dull footage graded into a vivid golden-hour look.
Brand identity — NewsOn Before After
Brand identityA dated logo lock-up refreshed into a modern, scalable brand mark.
Layout · Switcher

Show a whole portfolio in a single spot: pick a project from the thumbnails and the big comparison swaps in.

Website redesign — NewsOn Before After
Website redesignFrom a cluttered 2005 layout to a clean, conversion-ready homepage.
Mobile app UI — NewsOn Before After
Mobile app UIA crowded screen turned into a calm, thumb-friendly experience.
Brand identity — NewsOn Before After
Brand identityA dated logo lock-up refreshed into a modern, scalable brand mark.
Photo color grade — NewsOn Before After
Photo color gradeFlat, dull footage graded into a vivid golden-hour look.
Data dashboard — NewsOn Before After
Data dashboardA spreadsheet wall turned into a dashboard people actually read.
Product page — NewsOn Before After
Product pageA plain listing rebuilt to sell — bigger visuals, clearer buy button.