How to Change Image on Hover using Tailwind CSS?
One common effect is changing an image when the user hovers over it. We use Tailwind CSS, a utility-first CSS framework, to accomplish this without any additional JavaScript logic for the hover effect. By utilizing Tailwind's built-in classes we can create smooth transitions between two images where one image is displayed by default and another appears on hover.
Prerequisites
Approach
- Create the React project and install the tailwind CSS
- We define a container that holds both images, using absolute positioning to overlay them. The hover effect is controlled by modifying the opacity of the hover image, making it visible only when the container is hovered over.
- This results in a seamless visual transition that enhances user interaction.
- By using Tailwind CSS's built-in classes, we can manage styles efficiently without writing additional JavaScript logic.
Steps To Change Image On Hover
Step 1: Set up the project using the command
npx create-react-app react-app
cd react-app
Step 2: Install Tailwind CSS using the command
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Step 3: Configure the tailwind paths in your tailwind.config.js file
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {
colors: {
primaryGreen: "#4CAF50", // Green
primaryBlack: "#000000", // Black
primaryWhite: "#FFFFFF", // White
}
},
},
plugins: [],
}
Step 4: Add tailwind directives to your index.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
margin: 0;
font-family: 'Times New Roman', Times, serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
Project Structure:

Updated Dependencies:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Example: This example demonstrates the creation of a change image on hover using React and Tailwind CSS.
// App.js
import React, { useState } from "react";
function App() {
return (
<div className="flex items-center justify-center h-screen bg-green-500">
<div className="relative group">
{/* First Image (Visible by default) */}
<img
src="https://media.geeksforgeeks.org/wp-content/uploads
/20241010093604673744/file.jpg"
alt="Beautiful Landscape"
className="w-[400px] h-[400px] transition-opacity
duration-300 ease-in-out group-hover:opacity-0"
/>Second Image (Visible on hover) */}
<img
src="https://media.geeksforgeeks.org/wp-content/uploads
/20241010093914486734/file.jpg"
alt="Serene Nature"
className="absolute top-0 left-0 w-[400px] h-[400px]
transition-opacity duration-300 ease-in-out opacity-0
group-hover:opacity-100"
/>
</div>
</div>
);
}
export default App;
Step 4: Run the Application
npm start
Output:
Conclusion
This simple implementation demonstrates how to change an image on hover using Tailwind CSS without requiring JavaScript. By using utility classes for styling and transitions you can easily create interactive components for your web applications.