CSS Scale Transform on Hover

Scale Transform for Hover Effects

Scaling elements on hover is one of the most common interactive effects on the web. It creates a satisfying zoom-in effect that draws attention to clickable cards, images, and buttons.

The CSS

.card {
  transform: scaleX(1) scaleY(1);
  transition: transform 0.2s ease-out;
}

.card:hover {
  transform: scaleX(1.05) scaleY(1.05);
}

Scale Values Explained

Value	Effect
1	Original size (100%)
1.05	5% larger — subtle, professional
1.1	10% larger — noticeable, playful
1.5	50% larger — dramatic
0.95	5% smaller — pressed/active state
0	Invisible (collapsed to a point)

Independent Axis Scaling

You can scale each axis independently:

.stretch-x {
  transform: scaleX(1.2) scaleY(1);  /* Wider, same height */
}
.stretch-y {
  transform: scaleX(1) scaleY(1.3);  /* Taller, same width */
}

Performance

Scale transforms are composited on the GPU, making them one of the most performant ways to animate size changes. Unlike changing width or height, scaling does not trigger layout recalculations or repaints of surrounding elements.