マウスオーバーで画像拡大

img.grow {
    -webkit-transition:0.2s ease-in-out;
    -moz-transition:0.2s ease-in-out;
    -ms-transition:0.2s ease-in-out;
    -o-transition:0.2s ease-in-out;
    transition:0.2s ease-in-out;
}

img.grow:hover {
    -webkit-transform:scale(1.2,1.2);
    -moz-transform:scale(1.2,1.2);
    -ms-transform:scale(1.2,1.2);
    -o-transform:scale(1.2,1.2);
    transform:scale(1.2,1.2);
}

img タグに grow と名付けたクラスを追加。そして transition プロパティで拡大・縮小したときの滑らかな動きを指定します。
「0.2s」の部分はミリ秒単位で指定できます。
速度の割合を変更したい場合は、「ease-in-out」の他にease、linear、ease-in、ease-outのいずれかのキーワード、またはcubic-bezier関数を指定することになります。

それぞれの値の意味やcubic-bezier関数について説明すると、それだけで随分長くなってしまうのでここでは省略し、続いて transform プロパティで拡大・縮小の割合を指定します。
上記の例では1.2倍に拡大させています。
縮小したい場合は、例えば scale(0.8,0.8) と指定すればＯＫ。

次に html 側の記述を紹介します。

<img src="/sample.jpg" class="grow"/>

基本的には、拡大させたい画像のタグに class=”grow” と追加するだけです。

以上で、マウスオーバー時だけでなく、マウスカーソルが画像から外れた際にも滑らかな動きで拡大・縮小させることができます。