SiteKickr Web Development

Image link – enlarge on hover

If you're looking to jazz up your site a little bit, you've probably explored various CSS tricks, such as changing the opacity of images on hover, underlining text on hover, etc.

But, you may not have considered an image enlargement on hover. This works well on image icons.

If you're icons are 16px by 16px, you can bump their size a bit during a hover action. The obvious play is to simple adjust the CSS width and height. But, what might not be as obvious is how to reposition the image, so it's center point doesn't change.

Essentially, you just need to add a negative margin, equal to 1/2 the size of the image size increase.

a:hover img { width: 18px; height: 18px; margin: -1px; }