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 declared in the document to see the working of this selector in all the elements.
- Before Hovering on Red-Box:
- After Hovering on Red-Box:
Supported Browsers: The supported browsers are listed below:
- Google Chrome
- Internet Explorer
- Apple Safari
- How to Zoom an Image on Mouse Hover using CSS ?
- How to change opacity of every data element on hover in a table using CSS ?
- How to make checkbox visible when hover or select the element?
- CSS | zoom Property
- Google Maps | Zoom
- Zoom Functionality in ElectronJS
- How to disable zoom on a mobile web page using CSS?
- How to adjust CSS for specific zoom level?
- How to zoom in on a point using scale and translate ?
- How to use .on and .hover in jQuery ?
- CSS | :hover Selector
- How to disable a CSS :hover effect?
- How to write :hover condition for a:before and a:after in CSS?
- How to flip an image on hover using CSS ?
- How to write a:hover in inline CSS?
- How to reverse an animation on mouse out after hover?
- How to unbind “hover” event using JQuery?
- Shake a Button on Hover using HTML and CSS
- How to spin text on mouse hover using HTML and CSS?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.