How to Change Image on Hover using Tailwind CSS?

Last Updated : 10 Oct, 2024

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:

Screenshot-2024-09-12-114329 — 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.

JavaScript

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