Create Image Slider on Hover in Tailwind CSS

Last Updated : 24 Jul, 2024

This article aims to demonstrate How to create an Image Slide on Hover Effect using Tailwind CSS. The idea behind this is that when user hovers the cursor over the given image, it smoothly slides out of view, revealing additional content or providing an interactive experience.

Screenshot-2024-02-29-155905 — Image Slide on Hover Effect

Prerequisites

Approach

Create an HTML file named index.html and link the Tailwind CSS stylesheet for styling.
Use Tailwind CSS classes for layout, sizing, and transitions.
Apply a hover effect to translate the image.
Replace the image source with your preferred image link. Modify the overlay content as needed. Ensure Tailwind CSS is linked correctly for styling.

Example: This example shows the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Image Slide on Hover</title>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
          rel="stylesheet"/>
    <style>
        /* For adding effects */
        .image-container:hover img {
            transform: translateX(-100%);
        }
        .image-container:hover .overlay {
            opacity: 1;
        }
    </style>
</head>

<body class="bg-gray-100 py-10 flex 
            justify-center items-center">
    <div class="text-center">
        <h1 class="text-3xl font-bold mb-4">
            Image Slide on Hover
        </h1>
        <div class="image-container relative w-96 
            h-60 overflow-hidden rounded-lg">
            <img alt="Image Slide" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                  class="w-full h-full object-cover 
                         transition-transform 
                         duration-500 ease-in-out"/>
            <div class="overlay transition-opacity 
                        duration-500 ease-in-out 
                        absolute top-0 left-0 w-full 
                        h-full bg-black bg-opacity-50 
                        flex justify-center items-center 
                        opacity-0 text-white">
                <p class="text-xl">
                    Additional Content Here
                </p>
            </div>
        </div>
    </div>
</body>
</html>

Output:

Create a Responsive Image Carousel in Tailwind CSS

harshildhoot

Improve

Article Tags :

Create Image Slider on Hover in Tailwind CSS

Prerequisites

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?