etchdeveloperDemoGet the component
Demo

Before / After Image

Drag, click or hover to compare two photos of the same guitar. Each section uses the same component with different settings, from a hero to a card grid.

10 comparisons on one page. Brand names and copy are placeholders. Keyboard: press Tab to reach a divider, then use the arrow keys, Shift + arrow keys, Home and End.

Hero with a comparison

Viewport ratio 3 / 4 · Labels at the bottom · Eager loading, because it’s above the fold · Entrance animation: the divider sweeps in once

Lorem Guitar Works

Worn finishes, brought back to showroom gloss

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus, posuere velit aliquet.

Maecenas faucibus mollis interdum. Drag the divider to see the same guitar before and after.

Red electric guitar on a stand with a worn finish, chipped down to bare wood along the edges.
Before
The same guitar refinished in glossy red, with no chips or bare wood.
After

Zoom in on the details

Zoom and pan: On, up to 4× · Zoom buttons top left · Fullscreen button · Viewport ratio 1 / 1 with the crop focus on the body

Red electric guitar on a stand with a worn finish, chipped down to bare wood along the edges.
Before
The same guitar refinished in glossy red, with no chips or bare wood.
After

Zoom with the buttons, the plus and minus keys, Ctrl / ⌘ + scroll or a pinch. Alt + arrow keys and the arrow buttons move the zoomed photo.

Vertical split

Orientation: Vertical · Circle handle · Labels Worn and Refinished · Start position 40%

Red electric guitar on a stand with a worn finish, chipped down to bare wood along the edges.
Worn
The same guitar refinished in glossy red, with no chips or bare wood.
Refinished

The Up and Down arrow keys move a vertical divider; with Shift they move it in steps of 10%.

Click to compare in an article

Interaction mode: Click · Line handle · Custom viewport ratio 21 / 9 with the crop focus on the body

Case study

A worn relic finish, rebuilt in six weeks

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla.

Red electric guitar on a stand with a worn finish, chipped down to bare wood along the edges.
Before
The same guitar refinished in glossy red, with no chips or bare wood.
After
Click anywhere on the photo to move the divider there. Cras mattis consectetur purus sit amet fermentum.

Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo.

Translated labels and names

Labels Vorher and Nachher · All 12 accessible names in German · lang="de" on a parent element, so the slider value is read as “40 %”

Rote E-Gitarre auf einem Ständer mit abgenutztem Lack, an den Kanten bis aufs blanke Holz abgeplatzt.
Vorher
Dieselbe Gitarre nach der Neulackierung in glänzendem Rot, ohne Abplatzer.
Nachher

Ziehen Sie die Trennlinie oder nutzen Sie die Pfeiltasten.

Replays on every visit

Entrance animation: On · Animate once: Off · Duration 1500 ms · Start position 60%

Red electric guitar on a stand with a worn finish, chipped down to bare wood along the edges.
Before
The same guitar refinished in glossy red, with no chips or bare wood.
After

Scroll it out of view and back: the divider sweeps in again, until you move it yourself.

Hover cards in a portfolio grid

Interaction mode: Hover, for a mouse or trackpad · Line handle · Labels off · Image size: Large · Crop focus top, bottom and Contain · A different accessible name on each card

Recent work

Restorations from the workshop

Red electric guitar on a stand with a worn finish, chipped down to bare wood along the edges.
Before
The same guitar refinished in glossy red, with no chips or bare wood.
After

Neck and headstock

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Red electric guitar on a stand with a worn finish, chipped down to bare wood along the edges.
Before
The same guitar refinished in glossy red, with no chips or bare wood.
After

Body and finish

Integer posuere erat a ante venenatis dapibus.

Red electric guitar on a stand with a worn finish, chipped down to bare wood along the edges.
Before
The same guitar refinished in glossy red, with no chips or bare wood.
After

The whole guitar

Donec ullamcorper nulla non metus auctor fringilla.

Styled for a dark section

Styling variables on a parent class: dark handle and buttons, a 2 px divider, light square labels · Image fit: Contain on a surface that matches the section · Fullscreen button

Showroom

Same camera, same light, only the finish changes

Shoot both photos from the same spot with the same lens and light, so the comparison shows the work and nothing else. Lorem ipsum dolor sit amet.

Red electric guitar on a stand with a worn finish, chipped down to bare wood along the edges.
Before
The same guitar refinished in glossy red, with no chips or bare wood.
After

End of the demo. Get the Before / After Image component