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

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.

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.

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 of 0.

Step for Creating 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 install -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: It will look like the following.

 

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>

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

Output:

 

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

Output: