Register here for my first free workshop on API design for beginner using Node Js and MongoDB
#tech talks
#My articles on Logrocket

Scale elements on hover using CSS

April 06, 2019 • 🍿 1 min read • Edit this post on Github
Follow me on twitter. I share quick tips, my reading list and also about free workshop and webinars around web and mobile development everyday.

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.

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

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

Subscribe to my Newsletter

I share best news, articles and projects about JavaScript, React, GraphQL and real world development practices


Made with ❤️ in Tallinn, Estonia

Paramanantham Harrison's DEV Profile