How to display text on hover over image using Tailwind CSS in React.js ?
Last Updated :
26 Apr, 2025
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.
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.
Similar Reads
How to display button on hover over div in Tailwind CSS ?
Tailwind CSS provides a huge number of CSS utility classes that allow you to quickly apply to style and easily construct custom designs. In this article, we’ll see how to display the button when hovering over the div in TailwindCSS.Example 1: Create a <div> element and apply group and relative
2 min read
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
2 min read
How to Create an Image Overlay Fade in Text Effect on Hover using CSS ?
In the context of web design, it's all about making dynamic and interesting user experiences(UI). Adding picture overlay effects to the website is a good method to improve the aesthetic appeal, especially when users interact with it by hovering over images. This article will walk you through the ste
3 min read
How to Add Dark Mode in ReactJS using Tailwind CSS ?
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 direc
3 min read
How to add scale animation on hover using Tailwind CSS in React ?
In this article, we'll see how to add scale animation on hover using tailwind CSS in a ReactJS app. The hover effect appears when a user positions the cursor over an element. In tailwind CSS, the scale utility class helps in getting the zoom effect over an element. PrerequisitesReact JSTailwind CSSA
3 min read
How to create image overlay hover slide effects using CSS ?
In this article, we will learn how to make image overlay hover slide effects using CSS. When the users hover over the image, a smooth sliding overlay effect occurs. This technique gives a visual appeal with interactivity, making your website more interactive.Table of ContentFull Width Slide-In Text
4 min read
How to use Tailwind CSS with Next.js Image ?
Integrating Tailwind CSS with Next.js enables you to style your application efficiently using utility-first CSS. When combined with the Next.js Image component, you can create responsive and optimized images with ease and consistency. In this article, we will learn how to use Tailwind CSS with Next.
3 min read
How to Implement Reveal on Scroll in React using Tailwind CSS ?
In React, the reveal on the scroll is a technique, where elements on a page gradually appear or animate as the user scrolls down. Prerequisites:NPM & Node.jsReact JSTailwind CSSTo implement reveal in scroll in react using Tailwind CSS we have these methods: Table of Content Using the Intersectio
4 min read
How to Change Image Opacity on Hover using CSS ?
Changing the opacity of an image on hover can add a more elegant and interactive effect to your website. This simple yet effective technique can be implemented using CSS. When a user hovers over an image, it gradually becomes more transparent, pointing out the interaction and creating an attractive
2 min read
How to put author/title name over image in ReactJS?
We can place the author or title name over the image using the GridListTileBar Component in ReactJS. This component adds an overlay over the child component. Material UI for React has this component available for us and it is very easy to integrate. We can use the GridListTileBar component in ReactJ
2 min read