Create Side-by-Side Image Comparison In Tailwind CSS

Last Updated : 04 Oct, 2024

CSSA side-by-side image comparison feature allows users to compare two images: showcasing "before" and "after" states. This technique is widely used in various fields such as web design, photography, e-commerce, etc. We can also use this technique to highlight differences or improvements between two images.

Prerequisites

Approach To Create Side-by-Side Image Comparison

First, create a basic HTML structure, and in the <head> section, set the character encoding to "UTF-8" and include the viewport meta tag to make the website responsive.
Then include the Tailwind CSS CDN link in the <head> section using the <script> tag.
After that use the tailwind CSS to "grid" class to place the two images side by side, this "grid" class is used for a flexible, responsive structure.
You can also use those Tailwind CSS utility classes like: "rounded-lg", "shadow-lg", "gap-8", and "text-3xl" for rounded corners, shadows, and proper gap and text size.

Example: The example code below shows how to Create side-by-side image comparison using tailwind CSS

HTML

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Side-by-Side Image Comparison</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-100 flex justify-center items-center min-h-screen">

    <div class="w-6/12 p-6 bg-white rounded-lg shadow-lg">
        <h1 class="text-4xl font-bold text-center text-blue-800 mb-8"> 
          Side-by-side image comparison in tailwind css</h1>
        <div class="relative w-full max-w-5xl mx-auto h-96 overflow-hidden
                    rounded-lg shadow-lg">
            <!-- Before Image -->
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/
                      20240322101847/Default_An_illustration_depictin-(2)-660.jpg"
                alt="Before Image"
                class="absolute top-0 left-0 w-full h-full object-cover 
                       rounded-lg z-10 transition-all duration-500 ease-in-out">

            <!-- After Image (controlled by slider) -->
            <div class="absolute top-0 left-0 h-full rounded-lg shadow-lg 
                        z-20" id="afterImageContainer"
                style="width: 50%;">
                <img src="https://media.geeksforgeeks.org/wp-content/uploads
                          /20240322101847/Default_An_illustration_depictin-(2)-660.jpg"
                    alt="After Image"
                    class="absolute top-0 left-0 w-full h-full object-cover 
                           transition-all duration-500 ease-in-out">
            </div>
            <input type="range" min="0" max="100" value="50" class="absolute
             bottom-0 w-full z-30 opacity-100"
                id="slider">
        </div>
        <div class="grid grid-cols-2 gap-8 mt-4">
            <div class="text-center">
                <h2 class="text-4xl font-semibold text-green-700">Before</h2>
            </div>
            <div class="text-center">
                <h2 class="text-4xl font-semibold text-green-700">After</h2>
            </div>
        </div>
    </div>
    <script>
        const slider = document.getElementById('slider');
        const afterImageContainer = document.getElementById('afterImageContainer');

        slider.addEventListener('input', function () {
            afterImageContainer.style.width = `${slider.value}%`;
        });
    </script>

</body>

</html>