Scale elements on hover using CSS

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 👍

Visual Guide to API Design Best Practices

This visual eBook covers essential best practices for designing robust APIs using REST principles.

This book is ideal for beginners and backend developers seeking to enhance their API design skills. However, it is not suited for those seeking an in-depth exploration of API design. This book is a quick read under 40 slides like scrolling through your instagram feed.