Scale elements on hover using CSS

šŸ”„ Limited Time Offer
Coding with AI: Learn to build a SaaS MVP in 10 days

Coding with AI: Learn to build a SaaS MVP in 10 days

Master practical AI development to build and launch your startup MVP in weeks instead of months. Learn to leverage AI tools and APIs effectively.

  • šŸŽÆ Build real MVP: AI-powered SaaS from idea to launch
  • šŸ¤– Integrate ChatGPT, Claude, and other AI APIs efficiently
  • šŸ’° Implement AI features users will pay for
  • āš”ļø AI-assisted coding patterns to ship 10x faster
  • šŸš€ Launch your product in 10 days, not 10 months

Often we get a requirement to scale images on hover or content block on hover, it can be achieved using CSS through transform property

// Growing in size
.grow:hover {
  transform: scale(1.2);
}
// shrinking in size
.shrink:hover {
  transform: scale(0.8);
}

Here transform: scale property alone can't help the effect to be smooth, in order to get smooth effect, we need to add some transition to the elements.

.grow,
.shrink {
  transition: all 0.3s ease-in-out;
}

https://codepen.io/Param-Harrison/pen/MLypze

This technique has wide range of browser support without vendor prefixes. Feel free to use it next time when needed in your UI šŸ‘