当サイトでも随所で多用使っている、マウスオーバーした際に画像を拡大させるCSSテクニックを紹介します。

まずはこちら。CSSの設定です。

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" と追加するだけです。

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