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