How to Zoom an Element on Hover Using CSS ?

Display div element on hovering over <a> tag using CSS

Last Updated : 11 Sep, 2024

We will render the div element by hovering over the <a> tag using CSS. We can apply an adjacent sibling CSS selector property to the <a> tag that will display the hidden div element’s content while hovering over it.

The Adjacent sibling selector is a CSS Combinators, used to select the element that is adjacent or the element that is next to the specified selector tag.

Approach

Here, this combinator will select only 1 tag that is just next to the specified tag. To display a div element using CSS on hover a tag:

First, set the div element invisible i.e display:none;.
By using the adjacent sibling selector and hover on a tag to display the div element.

Example: This example illustrates how to display the div element by hovering a tag.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        h1 {
            color: green;
        }

        a+div {
            display: none;
        }

        a:hover+div {
            display: block;
            color: green;
            font-size: 25px;
        }
    </style>
</head>

<body style="text-align:center;">
    <h1>GeeksforGeeks</h1> <b>
        Hovering below element to see
        the &lt;div&gt; element.
    </b>
    <br><br>
    <a>GeeksforGeeks</a>
    <div> A computer science portal for Geeks. </div>
</body>

</html>

Output:

Supported Browsers:

Google Chrome 1.0
Microsoft Edge 12.0
Firefox 1.0
Opera 3.5
Safari 1.0

CSS is the foundation of web pages, is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.

How to Zoom an Element on Hover Using CSS ?

M

manaschhabra2

Improve

Article Tags :

Similar Reads

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 propertyUsing the visibility propertyUsing the display propertyThis approac

How to display paragraph elements as inline using CSS ?

The purpose of this article is to display paragraph elements as inline elements using CSS. The display property in CSS is used for placing the components ("div", "hyperlink", "heading", etc) on the web page. The display property is set to inline. It has the default property of "anchor" tags. It is u

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 relativ

How to hide text going beyond DIV element using CSS ?

Hiding text that goes beyond a div element in CSS means preventing the overflowed content from being displayed outside the containerâ€™s boundaries. This is done to maintain a clean layout and design consistency without showing excess text outside the designated area. CSS overflow propertyThe CSS over

How to zoom an element on Hover using CSS ?

Zooming an element on hover using CSS involves creating an effect where an element, such as an image or button, increases in size when the user hovers over it. This interactive technique enhances user engagement by highlighting elements through smooth scaling animations. ApproachHTML Structure: Uses

How hovering over a division element to gradually change the width in CSS ?

You can use transition property in CSS to make some transition effect as changing the width of an element. The transition effect can be defined in two states (hover and active) using pseudo-classes like : hover or: active or classes dynamically set by using JavaScript. Syntax:Â transition: transitio

Display Content on hovering Card using CSS

In this article, we will see how we can create a card that displays content on hovering using the hover property using HTML and CSS. HTML Code: In this section, we will create the structure of our HTML card. Create a "div" with class name "card".Create another "div" inside the main "div" with class

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,

How to overlay one div over another div using CSS

Creating an overlay effect simply means putting two div together at the same place but both the div appear when needed i.e while hovering or while clicking on one of the div to make the second one appear. Overlays are very clean and give the webpage a tidy look. It looks sophisticated and is simple

How to disable a link using only CSS?

To disable a link using CSS, pointer-events can be used, which sets whether the element in the page has to respond or not while clicking on elements. The pointer-events property is used to specify whether the element should respond to pointer events or not. The following example illustrates this app