How to Display Element on Hover using CSS ?

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:

Table of Content

Using the display property
Using the visibility property

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

Article Tags :

CSS

Web Technologies

CSS-Questions