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; }
If you are using a background image instead, you can employ CSS3 with a little extra effort. Below, we are assuming that our background image is 16px by 16px. As in the example above, we are stretching it by two pixels, but maintaining it's center point by adjusting it's background position.
a { display: block; margin-right: 1px; padding: 1px 20px 2px 0; background: url('/img/icon.png') 100% 2px no-repeat; }a:hover { margin-right: 0; padding-right: 21px; background-size: 18px auto; background-position: 100% 1px; }