DEV Community

loading...

Scale elements on hover using CSS

Paramanantham Harrison
Originally published at learnwithparam.com ・Updated on ・1 min read

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);
}

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;
}

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.

Discussion (2)

Collapse
itscoderslife profile image
Coder

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

Collapse
paramharrison profile image
Paramanantham Harrison Author • 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

Forem Open with the Forem app