DEV Community

Paramanantham Harrison
Paramanantham Harrison

Posted on • Updated on • Originally published at learnwithparam.com

Scale elements on hover using CSS

Follow me on Twitter, happy to take your suggestions on topics or improvements

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);
}
Enter fullscreen mode Exit fullscreen mode

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

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

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

Note: This article was originally written for my blog. I am republishing it here for the amazing DEV community.

Top comments (2)

Collapse
 
itscoderslife profile image
Coder

How do you create this component for series posts?
thepracticaldev.s3.amazonaws.com/i...

Collapse
 
learnwithparam profile image
Paramanantham Harrison • Edited

If you check the help section, they have example to do it.

It’s basically adding a meta detail while writing your post
β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”-
series: CSS nuggets
title: how to create a spinner in CSS
description: ....
β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”-

Like this