Create Image Slider on Hover in Tailwind CSS
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.
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/tailwindcss@2.2.19/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.w3wiki.net/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:
Contact Us