How to Zoom an Element on Hover Using CSS ? Last Updated : 10 Oct, 2024 Comments Improve Suggest changes Like Article Like Report 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 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: Comment More infoAdvertise with us Next Article How to Zoom an Element on Hover Using CSS ? M manaschhabra2 Follow Improve Article Tags : Web Technologies CSS CSS-Questions 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 2 min read How to Zoom an Image on Mouse Hover using CSS? CSS plays a vital role in styling modern websites, with over 90% of sites using it for visual effects and responsive layouts. One popular effect is image zoom on hover, which enhances user experience and adds visual appeal. In this article, you’ll learn three simple ways to create image zoom effects 2 min read 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 2 min read 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.Appr 2 min read 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.ApproachHTML Structure 1 min read Like