Css zoom effect on :hover event

Cool example showing scaling for the :hover event. When hovering the mouse, each image slowly increases in size, and when the focus is lost, it returns to its original size.

For this effect, a set of images sized 400x133 px is used. They are then reduced in size in the CSS code to 300x100px and expanded on hover. Horizontal centering is used, and a resized image can mess things up, so a negative margin value of half the width is applied.

#container {
width: 300px
margin: 0 auto;
}
#ex2 img{
height: 100px;
width: 300px
margin: 15px 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}
#ex2 img:hover {
height: 133px;
width: 400px
margin-left: -50px;
}
Example from source