How to Make An Image Grow/Shrink on Hover Using CSS

Posted on April 10, 2016

A great way to let a user know that an image is a link is to create a hover effect.  A lot of developers will use an overlay on hover but I prefer to use an effect that “pops” a bit more.  How about having the image jump off the page a bit on hover?  Something simple like that is functional as it tells the user that it’s a link but it also increases engagement.  Let’s take a look at how easy it is to add a simple scaling effect.

img {
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

img:hover {
-webkit-transform: scale(1.04);
-moz-transform: scale(1.04);
-o-transform: scale(1.04);
-ms-transform: scale(1.04);
transform: scale(1.04);
}

The code above will apply this effect to all images on your site which is probably not what you are looking to do so you’ll want to target a specific class, id, etc. The nice part about this code is that you can easily change it to a shrinking effect by lowering the scale value to below 1…for instance .97. It’s that simple. Check out the video below to see it in action.


Leave a Reply

Your email address will not be published. Required fields are marked *

 

Ready to Get Started? Call 203.516.0359