How to zoom an element on hover using CSS?

March 2, 2021

Zoom is nothing but a larger view of the object.

We can use transform property of CSS and increase the object size.

The scale() method is helpful to make the object larger.

Let’s add the HTML first and start with a simple div element with a class name hover-zoom.

Let’s add some style to make the div visible.

Finally, add the hover style and make the div element bigger on hover.

Let’s add transition property to add a nice smooth animation.


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to uninstall Cocoapods from the Mac OS? #4 How to Use SQL MAX() Function with Dates? #5 How to add Read More Read Less Button using JavaScript? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Apr 7 Solution for “Yarn build: Failed because of a stylelint error” Apr 7 Make sure your links have descriptive text Apr 7 How to add Laravel to WordPress using Sage theme (and install Tailwind CSS)? Apr 2 How to create a sidebar using pure CSS? Apr 1 How to switch dark and light themes using pure CSS? Apr 1 How to calculate elapsed time in JavaScript?

You might also like these

How to use a Subquery to Insert Multiple Rows in SQL Table?SQL/MySQLHow to Make CSS Lists Bullets Smaller?CSSHow to Clone Objects in PHP?MiscWhat are Identifiers in JavaScript?JavaScriptDid you get an error while displaying Special Characters in JavaScript?JavaScriptReverse a String in JavaScriptJavaScriptJavaScript: Methods for HTML DOM classList PropertyJavaScriptHow JavaScript classes allows us to do less typing (syntactic sugar)?JavaScriptThe flex-grow, flex-shrink and flex-basis Properties in CSSCSSDifferent Types of Functions in JavaScriptJavaScriptHow to add a Pie Chart in Angular App?AngularConditional operator in JavaScript (aka ternary operator)JavaScript