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……add a little spice to your page.