Skip to main content

Hover Grow

Hover to trigger

Scales up slightly on hover — good for icons, avatars and thumbnails.

Move the pointer over the box
Triggered by :hover and never auto-plays on load. Move the pointer in and out to watch it again.
Tune parameters
Interactive animations are driven by pointer state; duration and easing live on transition / animation — change the numbers in the code below.
Full code
/* Hover Grow */
.anim-hover-grow {
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.anim-hover-grow:hover {
  transform: scale(1.12);
}