How to Make Elements Zoom/Scale up on Hover With CSS

Learn how to make elements zoom/scale-up on hover with pure CSS by using the transform property’s transformation method: scale().

Zoom/Scale-Up on hover

Try moving your mouse over this box:

It scales up exactly 1.5 times the original size — so it becomes 50% bigger when you move your mouse over (hover) it.

The CSS transform property’s scale method can either increase or decrease the size of elements. It works in both 3D and 2D. In this simple example, we use 2D.

To recreate the example above, we need 1 HTML element and 2 CSS rule-sets.

The HTML

First create your HTML element with a class called zoom-box:

<div class="zoom-box"></div>

The CSS

Then add this CSS to your stylesheet:

.zoom-box {
  background-color:#CF4B32;
  width: 100px;
  height: 100px;
  margin: 32px auto;
  transition: transform .2s; /* Animation */
}

.zoom-box:hover {
  transform: scale(1.5);
}

That’s it!

How the code works

• First, we create an HTML div element with a class attribute called zoom-box.
• Then we create two rule-sets for the zoom box class, one for the static default state, .zoom-box and one for the dynamic hover state, .zoom-box:hover.
• The first rule-set gets some cosmetic/size properties (height, width, color). The margin property is just to center align the box (optional).
• The important part of the .zoom-box class is the transition property with the value of transform and duration of .2s (200 milliseconds).
• In the second rule-set .zoom-box:hover we add the transform property, with the scale() method as a value. It takes a parameter 1.5 which is what dictates how much the box element should scale up on hover. 1.5 is like saying 150% of the original size.

Browser compatibility

Here’s the code from this tutorial with added browser vender prefixes, so it works in all the mainstream browsers, Chrome, Firefox, Safari, Opera:

.zoom-box {
	background-color: #cf4b32;
	width: 100px;
	height: 100px;
	margin: 32px auto;
	-webkit-transition: -webkit-transform 0.2s;
	transition: -webkit-transform 0.2s;
	transition: transform 0.2s;
	transition: transform 0.2s, -webkit-transform 0.2s; /* Animation */
}

.zoom-box:hover {
	-webkit-transform: scale(1.5);
	        transform: scale(1.5);
}

Good to know

Notice that the box element scales up and down with the same transition duration/timing, even though we only added the transition property to the .zoom-box class.

This happens because when the transition property is added to the original class selector (.zoom-box), its values are automatically added to every additional selector attached to the class, in this case, it’s :hover (also called a pseudo-class)

If you only add the transition property to the :hover (pseudo) selector class, then it only animates the scale-up part — not scale down. As soon as you move outside of the box element, it abruptly scales down with zero (0s) duration — which you rarely want, since it’s harsh on the eyes.

If you want to use different animation types and duration on the different states of your element (up/down), you simply add a transition property to the :hover pseudo-class selector, and give it different values.