Open In App

How to Display Element on Hover using CSS ?

Last Updated : 22 Mar, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

In web development, displaying an element on hover is a common interaction pattern used to reveal additional content or actions.

Below are the various CSS approaches to achieve this effect:

Using the display property

This approach makes a hidden element appear when we hover over another element. It works by changing the display property of the hidden element from none to block when we hover over the element that contains it.

Example: The below code will explain the use of the display property to display elements on hover in CSS.

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>
        Display Element on Hover
    </title>
    <style>
        h3,
        .parent-element {
            text-align: center;
        }

        .hidden-element {
            display: none;
        }

        .parent-element:hover 
        .hidden-element {
            color: blue;
            display: block;
            margin: auto;
            height: 50px;
            width: 200px;
            border: 1px solid green;
            border-radius: 5px;
        }
    </style>
</head>

<body style="text-align: center;">
    <h2>
        Using CSS display property
    </h2>
    <h3>
        Hover the below text to see
        <br/>hidden content
    </h3>
    <div class="parent-element">
        Hover over me <br/>
        <div class="hidden-element">
            I'm visible now!
        </div>
    </div>
</body>

</html>

Output:

fosiGIF

Using the visibility property

This approach involves toggling the visibility property of an element between hidden and visible to show or hide it on hover. Using visibility allows the element to remain in the layout, affecting the positioning of other elements around it.

Example: The below code uses the visibility property to display elements on hover using CSS.

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>
        Display Element on Hover
    </title>
    <style>
        h3,
        .parent-element {
            text-align: center;
        }

        .hidden-element {
            visibility: hidden;
            opacity: 0;
            transition: 
                visibility 0s, opacity 0.5s ease;
        }

        .parent-element:hover 
        .hidden-element {
            color: green;
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>

<body style="text-align: center;">
    <h2>
        Using CSS visibility property
    </h2>
    <h3>
        Hover the below text to see the 
        <br/> hidden content.
    </h3>
    <div class="parent-element">
        Welcome to GFG!
        <div class="hidden-element">
            GeeksforGeeks is a olnline 
            learning platform
        </div>
    </div>
</body>

</html>

Output:
fosiGIF



Similar Reads

How to display text on hover over image using Tailwind CSS in React.js ?
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:NPM &amp; Node.jsReact JSTailwindCSSApproach:To display text hover over the image using Tailw
4 min read
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 &lt;div&gt; element and apply group and relative CSS classes to make it a parent element and to p
2 min read
How to Style Parent Element when Hover Over a Child Element in CSS ?
In this article, we will learn how to style the parent element when hovering over a child element. Styling the parent element when hovering over a child element is a useful CSS technique that allows you to change the appearance of the parent element when the mouse cursor is hovering over one of its child elements. This can be useful for adding inte
3 min read
What is the difference between display: inline and display: inline-block in CSS?
The display property in CSS is a very useful and commonly used property that contains many values. The display property defines how an HTML element should be displayed on the webpage. The property also specifies the type of box used for an HTML element and how it should be laid out on the page. If we need to display the elements that are laid out a
4 min read
How display: inline is different from display: inline-block in CSS ?
In this article, we will know about the display property in CSS, along with understanding the 2 different property values for display property, i.e., display: inline &amp; display: inline-block properties, &amp; will understand their basic differences &amp; implementation through the examples. The display property facilitates setting the element by
3 min read
What is the difference between display:inline-flex and display:flex in CSS ?
In this article, we will see the display property &amp; its values, i.e. the inline-flex &amp; flex, in order to specify the display behavior of an element, along with understanding their basic differences &amp; will illustrate them through the examples. Both CSS display: inline-flex and display: flex properties are used to create flexible layouts.
3 min read
How to zoom an element on Hover using CSS ?
In this article, we learn about how to zoom on hover using CSS. It is called pseudo-selector and used to select all the elements when the user moves the mouse over the elements. When the user hovering on the element the scale function is called to increase the dimensions of the element. It can be used on all the elements. An element must be declare
1 min read
How to change opacity of every data element on hover in a table using CSS ?
There is a Table made by using HTML in which data elements are set to a low opacity. The task is to change the opacity of a particular element when user hover over data elements. To make a table look better, we will use gradient colors to set backgrounds of the table data elements. In this approach, we will be using the opacity property of CSS to c
2 min read
How to add border to an element on mouse hover using CSS ?
We have given a web page containing elements and the task is to add border to an element on mouse move over (hover) using CSS. When we add a border to an element on hovering the mouse, it affects the position of the other nearest element. To remove this problem, we can use the CSS margin property. Example: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html
1 min read
Display div element on hovering over &lt;a&gt; tag using CSS
In this article, we will know how to render the div element by hovering over the &lt;a&gt; tag using CSS, &amp; will understand its implementation through the example. We can apply an adjacent sibling CSS selector property to the &lt;a&gt; tag that will display the hidden div element's content while hovering over it. The Adjacent sibling selector i
2 min read