Before & After Image Comparison
An interactive split-screen comparison slider with a draggable handle. Lets visitors slide between two layers (e.g. before/after design or raw code vs final render).
The code
Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.
<section class="compare-section">
<div class="compare-head">
<span class="eyebrow">Transformation</span>
<h2>See the difference for yourself</h2>
<p>Drag the slider to compare raw data with interactive dashboards.</p>
</div>
<div class="slider-box" id="sliderBox">
<!-- Bottom layer: After -->
<div class="layer layer-after">
<div class="visual visual-after">
<div class="badge-tag after-tag">Clean Dashboard</div>
<div class="chart-mockup">
<div class="chart-metric"><strong>$128,450</strong><span>Total Revenue (+34%)</span></div>
<div class="chart-bars">
<span style="height: 45%"></span>
<span style="height: 60%"></span>
<span style="height: 85%"></span>
<span style="height: 70%"></span>
<span style="height: 100%"></span>
</div>
</div>
</div>
</div>
<!-- Top layer: Before, clipped by percentage -->
<div class="layer layer-before" id="layerBefore">
<div class="visual visual-before">
<div class="badge-tag before-tag">Raw CSV Data</div>
<div class="raw-data-mockup">
<code>id,date,user,amount,status<br>101,2026-10-01,usr_92,120.00,PAID<br>102,2026-10-02,usr_44,450.50,PENDING<br>103,2026-10-03,usr_18,89.00,PAID<br>104,2026-10-04,usr_62,1200.00,PAID<br>105,2026-10-05,usr_77,340.20,FAILED</code>
</div>
</div>
</div>
<!-- Slider divider bar -->
<div class="divider" id="sliderDivider">
<div class="divider-line"></div>
<div class="divider-handle" aria-label="Drag to compare before and after">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m8 6-6 6 6 6M16 6l6 6-6 6"/></svg>
</div>
</div>
</div>
</section>The AI prompt
Paste this into an AI coding tool to generate the same section, then ask it to adapt the colours, text or framework to your project.
Create an interactive before-and-after comparison slider section with HTML, CSS and vanilla JavaScript. Requirements: - A responsive card container (max 760px wide, aspect-ratio 16:10, rounded corners) with two stacked visual layers. - The bottom layer displays "After" (e.g. interactive chart dashboard on dark background). - The top layer displays "Before" (e.g. raw CSV data on light background) and is clipped by setting width as a percentage (starts at 50%). - A vertical divider bar with a circular draggable handle icon sits at the split position. - JavaScript listens for pointer events (pointerdown, pointermove, pointerup) to smoothly update the split percentage across mouse and touch. - Centered section header with eyebrow and description. Return one HTML file with <style> and <script> tags.
How to build it, step by step
- 1
Layer two full-size visuals on top of each other using position: absolute.
- 2
Wrap the top layer in an element with overflow: hidden, and adjust its width from 0% to 100% to reveal the layer underneath.
- 3
Give the inner visual fixed width (equal to the container's max width) so it does not distort as the parent width changes.
- 4
Move the divider line and handle to the same percentage position.
- 5
Use Pointer Events with setPointerCapture so drag interactions remain smooth even if the cursor leaves the element.
Customisation tips
- Set touch-action: pan-y on the container so vertical page scrolling works while horizontal dragging controls the slider.
- Clamp the drag position between 5% and 95% so neither side completely vanishes.
- Use this for portfolio case studies to demonstrate design refactors.