Before After Image Card

<!DOCTYPE html>
<title>My Example</title>

<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>