Studio Nope - Before and After

A drag-to-compare image slider that lets visitors reveal differences between two images by dragging a handle across the frame. Before After Pro is perfect for showcasing renovations, retouching, product changes, or any visual transformation — fully customizable from the editor.

Every element is configurable from the Style tab: container width, aspect ratio (5 presets from 16:9 to 21:9 ultrawide), border radius, box shadow, divider line (color, width, shadow), handle (background, icon color, border color, size), labels (text color, background, font size, border radius, padding), captions (text color, font size), and responsive breakpoints. 26+ style fields in total.

What you can build:

• Before/after renovation showcases

• Photo retouching comparisons

• Product upgrade demonstrations

• Design iteration comparisons

• Seasonal or temporal change displays

Content features: Before and after images with alt text. Configurable labels ("Before" / "After") with show/hide toggle. Optional captions for additional context. Adjustable initial slider position (10-90%).

Interaction: Drag handle with mouse or touch to reveal. Smooth clip-path based transition. Works on desktop and mobile. Responsive handle and label sizing.

Style tab: Container (max width, horizontal padding), image (aspect ratio, border radius, min/max height, box shadow), divider & handle (divider color/width/shadow, handle background/icon color/border color/size), labels (text color, background color with opacity, font size, border radius, padding), captions (text color, font size), spacing (padding top/bottom), responsive (tablet/mobile breakpoints). Handle colors inherit from HubSpot theme settings.

Works on any HubSpot template, no theme required.