Before/After Image Card

Visually showcase a transformation with this interactive "before and after" image comparison slider.

This component is perfect for photographers, designers, and case studies. It allows users to drag a handle across an image to reveal the changes between an original and an updated version, providing a powerful way to demonstrate value and skill.

Screenshot of an interactive before/after image comparison slider.

Get Source Code Preview

About this Component

This is an interactive component powered by CSS and a small, dependency-free JavaScript snippet. The two images are layered on top of each other, and the script dynamically changes the clipping of the top image as the user drags the handle. It's also fully responsive and includes support for touch devices.

Features

Interactive Slider: A user can click and drag (or touch and drag on mobile) the handle to reveal the "before" and "after" states.
Lightweight JavaScript: The slider logic is handled by a small snippet of vanilla JavaScript with no external dependencies.
CSS-Powered Reveal: The image reveal effect is created by dynamically changing the CSS clip-path property, which is a modern and performant technique.
Touch Support: The script includes event listeners for touch events, making it work seamlessly on mobile devices.

Code Breakdown

HTML Structure

The card contains a main div with the class .ba-image-container. Inside, the two images ("before" and "after") are placed. This is followed by an empty div that will serve as the draggable handle. It's important that the "after" image comes second in the HTML, as it will be layered on top.

CSS Styling

The .ba-image-container is set to position: relative to act as the positioning context. The "after" image is then absolutely positioned to sit directly on top of the "before" image. The core of the visual effect is the clip-path property on the .ba-image-after class. By default, clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%) only reveals the left 50% of the image. The slider handle is another absolutely positioned div with pseudo-elements used to create the draggable circles.

JavaScript Logic

The script listens for mouse and touch events (mousedown, mousemove, touchstart, etc.) on the image container. When a drag action starts, it calculates the cursor's horizontal position as a percentage relative to the container's width. It then dynamically updates the inline style of the "after" image, changing the clip-path percentage to match the cursor's position. It also updates the left property of the handle to keep it aligned with the clipping edge.

Code

Here is the complete, self-contained code. To use it, simply replace the src attributes of the two elements with your own "before" and "after" images.

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f3f4f6;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* Optional: a container to center the card on the page for demonstration */
.demo-container-ba {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

/* === Before/After Card Styles === */
.ba-card {
    --ba-radius: 12px;
    --ba-shadow: 0 4px 10px rgba(0,0,0,0.06);
    --handle-color: #ffffff;
    
    background-color: #ffffff;
    border-radius: var(--ba-radius);
    box-shadow: var(--ba-shadow);
    max-width: 600px;
    width: 100%;
}

/* The main container for the image comparison */
.ba-image-container {
    position: relative;
    overflow: hidden;
    cursor: col-resize;
    user-select: none;
    -webkit-user-select: none; /* For Safari */
}

.ba-image-before, .ba-image-after {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}
.ba-image-after {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    /* Start by revealing the right 50% of the 'after' image */
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

/* The slider handle */
.ba-slider-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%; /* Start in the middle */
    width: 4px;
    background-color: var(--handle-color);
    transform: translateX(-50%);
    pointer-events: none; /* Prevents interference with mouse events */
}
.ba-slider-handle::before,
.ba-slider-handle::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border: 3px solid var(--handle-color);
    border-radius: 50%;
    background-color: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
}
.ba-slider-handle::before {
    top: calc(50% - 60px);
}
.ba-slider-handle::after {
    bottom: calc(50% - 60px);
}

.ba-card-content {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid #e5e7eb;
}
.ba-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

</style>

<div class="demo-container-ba">
    <article class="ba-card">
        <div class="ba-image-container">
            
            <img class="ba-image-before" src="https://placehold.co/1200x800/6b7280/9ca3af/png?text=Before" alt="A desaturated landscape photo.">

<img class="ba-image-after" src="https://placehold.co/1200x800/22c55e/ffffff/png?text=After" alt="A vibrant, color-corrected landscape photo.">
            
            <div class="ba-slider-handle"></div>
        </div>
        <footer class="ba-card-content">
            <h3 class="ba-card-title">Landscape Photo Retouching</h3>
        </footer>
    </article>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const containers = document.querySelectorAll('.ba-image-container');
    
    containers.forEach(container => {
        let isDragging = false;
        const afterImage = container.querySelector('.ba-image-after');
        const handle = container.querySelector('.ba-slider-handle');

const moveSlider = (x) => {
            const rect = container.getBoundingClientRect();
            let position = (x - rect.left) / rect.width;
            
            // Constrain position between 0 and 1
            position = Math.max(0, Math.min(1, position));

container.addEventListener('mousemove', (e) => {
            if (isDragging) {
                moveSlider(e.clientX);
            }
        });
        
        // Touch support for mobile devices
        container.addEventListener('touchstart', (e) => {
            isDragging = true;
        });
        
        container.addEventListener('touchend', () => {
            isDragging = false;
        });
        
        container.addEventListener('touchmove', (e) => {
            if (isDragging && e.touches.length > 0) {
                moveSlider(e.touches[0].clientX);
            }
        });
    });
});
</script>

View Output