travis.media

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.

----------

** This article may contain affiliate links. Please read the affiliate disclaimer for more details.

About Me Author

Travis of

Travis Media

From agency work with WordPress and PHP, to freelancing full-time, to jumping into the corporate space and working on large, mission-critical projects as a DevOps engineer, I create content to share what I’m learning along the way and to help you, the developer, succeed in the industry. Read More
Explore

You May Also Like