0

マウスオーバーで画像を拡大・縮小表示 scale()

マウスオーバーでサムネイル拡大・縮小表示 scale()

サイト内のサムネイル画像などに動きを持たせたい時の一例として、マウスオーバーで画像を拡大ズームや縮小表示を、CSSのtransformプロパティのscale値で指定することができます。

 

▼サンプルを見ながら確認していきましょう。
横300px,高さ200pxのサムネイルを配置したとします。

 

【サンプル1】マウスオーバーで(×1.2)に拡大
【サンプル1】マウスオーバーで(×0.8)に縮小

 マウスオーバーで(×1.2)に拡大

 

デモサンプル

 それぞれのimg要素をdivで囲んでいます。

 img要素のtransitionに1sと指定し、変化する時間の長さを1秒に指定。
img:hover要素にtransform: scale(数値);を指定し、scale()内の数値で拡大・縮小を設定します。

※IE8以下は非対応です。




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > マウスオーバーで画像を拡大・縮小表示 scale()