By clipping the image to the bounds of a div, we can pull off some pretty cool hovers. To begin, we’ll make it so that when the user hovers over the image, the photo enlarges while still staying within its bounds, resulting in a zooming in effect.
The next effect keeps the image the same size throughout, but pans it sideways as the user hovers. As you can see in our kicking example, this is a great way to convey a sense of action. For the pan, we’re not changing the image size like we did last time, but instead using margin to pull the image left on hover. If you want it to move right, use a positive value or margin-right.
I'm a sucker for an easy copy and paste effect. And with this, they offer that you can use these examples (steal them, as they say) and experiement for yourself. For a bit of fun with shapes, but coming from a vertical angle, black-and-white or simply shrink or zooming in to the photo. This site always offers up the CSS of the was used to dictate the basic appearence of the examples.