How to Display Element on Hover using CSS ?

How to Zoom an Element on Hover Using CSS ?

Last Updated : 10 Oct, 2024

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.

Approach

HTML Structure: Uses a <div> element with the class .sudo to apply the zoom effect.
Base Styling: The .sudo class sets padding, background color, size, and border-radius for the element.
Transition Setup: Adds transition: transform .2s for smooth animation when the hover effect is triggered.
Hover Effect: The .sudo:hover class uses transform: scale(1.5) to zoom the element to 1.5 times its size.
Cross-Browser Compatibility: Includes -ms-transform and -webkit-transform for support in older versions of IE and Safari.

Example: Here we are following above explained approach.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to zoom an element
        on Hover using CSS ?
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        * {
            box-sizing: border-box;
        }

        .sudo {

            padding: 50px;
            background-color: red;
            transition: transform .2s;
            width: 160px;
            height: 160px;
            margin: 0 auto;
            border-radius: 29px;
        }

        .sudo:hover {
            -ms-transform: scale(4.6);
            /* IE 9 */
            -webkit-transform: scale(1.5);
            /* Safari 3-8 */
            transform: scale(1.5);
        }
    </style>
</head>

<body>
    <center>
        <h1>
            GeeksForGeek
        </h1>

        <h2>
            How TO – Zoom on Hover
            in inline CSS
        </h2>

        <div class="sudo">
            Hover on Me
        </div>
    </center>
</body>

</html>

Output:

How to Display Element on Hover using CSS ?

M

manaschhabra2

Improve

Article Tags :

Similar Reads

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 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 Zoom an Image on Mouse Hover using CSS ?

Here are three different ways to zoom an image on mouse hover in CSS. 1. Using CSS transform and scale PropertyThe most common way to implement image zoom on hover is by using the CSS transform property along with the scale property. This method allows you to enlarge the image when the mouse hovers

How to create icon hover effect using CSS ?

To style an icon's color, size, and shadow using CSS, use the color property to set the icon's color, font size to adjust its size, and text-shadow or box-shadow for adding shadow effects, creating a visually appealing and dynamic look. Using: hover Pseudo-ClassUsing the: hover pseudo-class, you can

How to Flip an Image on hover using CSS?

Flipping an image with a mirror effect on hover using CSS enhances visual interaction by applying transformations along the X or Y axis. This dynamic hover animation creates an engaging experience by flipping the image horizontally or vertically, resulting in an eye-catching, interactive effect. App

How to Fade a Button on Hover using CSS ?

Fading a button on Hover in CSS is a visually engaging effect that can be done using various approaches. Below are the approaches to fade a button on hover using CSS: Table of Content Using opacity PropertyUsing Linear Gradient with RGBA ValueUsing opacity PropertyThis approach utilizes the CSS opac

How to add border to an element on mouse hover using CSS ?

Adding a border to an element on mouse hover using CSS involves changing the element's border style when the mouse pointer is over it. This effect enhances user interaction by visually highlighting the element, achieved using the :hover pseudo-class to modify border properties. Approach HTML Structu

How to create an Image Overlay Zoom Effect on hover using CSS ?

Image Overlay Zoom Effect on hover can be done by using CSS. This effect is used in web design for user attention to images by highlighting the content or text, and to improve the overall look of a website by adding dynamic visual effects. We have given a Zoom effect to the text and image when the u

How to make Profile Card Hover Effect using CSS ?

Almost all of us must have heard that 'the first impression is the last impression'. The profile card carries the most important details we should know about a person at the very first instant. A better impression attracts more traffic. So to engage more audience in a website it is very important to

How to Shift Inline Elements When Text Bold on Hover using CSS ?

When we will use a:hover pseudo-class to add a bold effect to the inline elements then we observe that whenever we hover over elements with the mouse, the elements to the right side of the mouse gets shifted to the right. This is not a good user experience thus needs to be removed. We can use the le