Open In App

How to display text on hover over image using Tailwind CSS in React.js ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we’ll see how the text appears on hover over an image using tailwind CSS in a ReactJS app. With the help of Tailwind CSS utility classes, we can display the text or image or anything after hovering over an element in Reactjs.

Prerequisites:

Approach:

To display text hover over the image using Tailwind CSS in React JS we can use the tailwind classes like hover etc. We will display only the image and hide other content, then on hover display the related text.

Tailwind CSS is a CSS framework that helps in building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Tailwind CSS creates small utilities with a defined set of options enabling easy integration of existing classes directly into the HTML code.

Syntax:

<a class="relative block group">
<img class="absolute inset-0 object-cover w-full
h-full group-hover:opacity-50" />
<div class="relative">
...
</div>
</a>

Tailwind CSS Classes used:

  • relative: This is used to position an element according to the normal flow of the page.
  • absolute: This is used to position an element outside of the normal flow of the page having its nearer elements work the same as if the element does not exist.
  • group: It acts as a parent element for the group-hover class.
  • group-hover: It styles the target element.
  • transition-all: All the class will get a transition effect. This is also the default value for this class.
  • transform: This class is used to transform an element.
  • translate-y-x: It holds the length of translation corresponding to the y-axis.
  • opacity-0: It makes the opacity 0.

Step for Create React Application and Installing Module:

Step 1: Create a React application using the following command:

npm create-react-app appname

Step 2: After creating your project folder i.e. folder name, move to it using the following command:

cd foldername

Step 3: After creating the React.js application, install the Tailwind CSS using the following command.

npm i -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Step 4: Importing tailwind into our app. To do this write the below-given code into your main CSS file. Here it is index.css.

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 5: Configure template paths in the tailwind.config.js file using the following command:

module.exports = {
    content: [
        "./src/**/*.{js,jsx,ts,tsx}",
    ],
}

Project Structure:

The project structure will look like this.

Screenshot-from-2023-11-10-10-38-17

The updated dependencies after installing required modules

"devDependencies": {
        "autoprefixer": "^10.4.16",
        "postcss": "^8.4.31",
        "tailwindcss": "^3.3.5"
}

Example 1: Below example demonstrates the appearance of text over an image on hover in React.js using Tailwind CSS.

Javascript




// Filename - App.js
 
import React from "react";
 
function App() {
    return (
        <>
            <center>
                <h1 className="text-green-600 text-4xl">
                    GeeksforGeeks
                </h1>
                <h2 className="text-black text-2xl">
                    Text appears on Hover over image using
                    Tailwind CSS in React
                </h2>
            </center>
            <div class="flex items-center justify-center mt-12">
                <a
                    class="relative block w-1/4 bg-gray-900 group"
                    href="##"
                >
                    <img
                        class="absolute inset-0 object-cover
                                w-full h-full group-hover:opacity-50"
                        src="https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png"
                    />
                    <div class="relative p-5">
                        <div class="mt-40">
                            {/* Hidden content */}
                            <div
                                class="transition-all transform
                                translate-y-8 opacity-0
                                group-hover:opacity-100
                                group-hover:translate-y-0"
                            >
                                <div class="p-2">
                                    <p class="text-lg text-white">
                                        Welcome to
                                        GeeksforGeeks.
                                    </p>
                                    <button
                                        class="px-4 py-2 text-sm
                                            text-white bg-green-600"
                                    >
                                        Visit site
                                    </button>
                                </div>
                            </div>
                            {/* End of hidden content */}
                        </div>
                    </div>
                </a>
            </div>
        </>
    );
}
 
export default App;


Steps to Run the Application: Use this command in the terminal inside the project directory.

npm start

Output: This output will be visible on http://localhost:3000/ on the browser window.

Example 2: Below example demonstrates the appearance of an image and text over an <div> element on hover in React.js using Tailwind CSS.

Javascript




// Filename - App.js
 
import React from "react";
 
function App() {
    return (
        <>
            <center>
                <h1 className="text-green-600 text-4xl">
                    GeeksforGeeks
                </h1>
                <h2 className="text-black text-2xl">
                    Text appears on Hover over image using
                    Tailwind CSS in React
                </h2>
            </center>
            <div class="flex items-center justify-center mt-12">
                <a
                    class="relative block w-1/4 h-64
                      bg-gray-900 group"
                    href="##"
                >
                    <div
                        class="absolute bg-green-500 inset-0
                            w-full h-64 group-hover:opacity-50"
                    ></div>
                    <div class="relative p-10">
                        <div class="mt-2">
                            {/* Hidden content */}
                            <div
                                class="transition-all transform
                                translate-y-8 opacity-0
                                group-hover:opacity-100
                                group-hover:translate-y-0"
                            >
                                <div class="p-2">
                                    <img
                                        src="https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png"
                                        alt="logo"
                                        width={100}
                                        className="rounded-full"
                                    />
                                    <p class="text-xl text-white">
                                        Welcome to
                                        GeeksforGeeks.
                                    </p>
                                    <button
                                        class="px-4 py-2 text-sm
                                            text-white bg-green-600"
                                    >
                                        Learn more
                                    </button>
                                </div>
                            </div>
                            {/* End of hidden content */}
                        </div>
                    </div>
                </a>
            </div>
        </>
    );
}
 
export default App;


Steps to Run the Application: Use this command in the terminal inside the project directory.

npm start

Output: This output will be visible on http://localhost:3000/ on the browser window.



Last Updated : 10 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads