How To Make An Item Grow On Hover with CSS

Here is a simple tweak for you to use on your site to make it a bit more exciting for the user (as long as you don’t over do it, right?). Find an element or two and make it expand or shrink when the mouse hovers over. Here’s an example:

Make An Item Grow On Hover with CSS

So how you do make an item grow on hover with css? Simple, two snippets of code that you can use again and again:

.grow { 
  transition: all .2s ease-in-out; 
}

.grow:hover { 
  transform: scale(1.1); 
}

Now just add .grow as a class to any element and it will do it on hover.

If you want it bigger just up the 1.1 (1.0 being equal size).

Make An Item Shrink On Hover with CSS

If you want your element to shrink a bit on hover just create a style for .shrink:

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

.shrink:hover { 
  transform: scale(0.9); 
}

Now just add .shrink as a class to any element and it will do it on hover.

Keep these in your style.css in case you need them and go ahead and add a little spice to your page.

Simple enough.

Make An Item Grow On Hover with Tailwind CSS

What if you are using Tailwind CSS. How does this same thing translate? Like so…

To grow

<div class="flex justify-around">
  <img class="transition-all duration-200 ease-in-out hover:scale-110" src="1-hover.jpg" />
  <img class="transition-all duration-200 ease-in-out hover:scale-110" src="2-hover.jpg" />
</div>

To shrink

<div class="flex justify-around">
  <img class="transition-all duration-200 ease-in-out hover:scale-90" src="1-hover.jpg" /> 
  <img class="transition-all duration-200 ease-in-out hover:scale-90" src="2-hover.jpg" />
</div>