CSSだけで実現！ホバー時に要素をズーム（拡大）させる方法

CSSのtransformプロパティが持つ変形メソッドscale()を使えば、JavaScriptに頼らず、純粋なCSSだけでホバー時に要素をズーム（拡大）させることができます。この記事では、その具体的な実装方法をわかりやすく解説します。

ホバーでズーム・スケールアップ

下のボックスにマウスカーソルを乗せてみてください。

マウスを乗せた瞬間、ボックスは元のサイズのちょうど1.5倍——つまり50%大きく表示されます。

CSSのtransformプロパティに含まれるscale()メソッドは、要素のサイズを拡大・縮小できる機能です。3Dと2Dの両方に対応しており、このシンプルな例では2Dを使用します。

このサンプルを再現するために必要なのは、HTML要素が1つと、CSSのルールセットが2つだけです。

HTML

まず、zoom-boxというクラス名を持つHTML要素を作成します。

<div class="zoom-box"></div>

CSS

続いて、スタイルシートに以下のCSSを追加します。

.zoom-box {
  background-color:#CF4B32;
  width: 100px;
  height: 100px;
  margin: 32px auto;
  transition: transform .2s; /* アニメーション */
}

.zoom-box:hover {
  transform: scale(1.5);
}

これで完成です！

コードの仕組み

• まず、zoom-boxというクラス属性を持つdiv要素をHTMLで作成します。
• 次に、zoom-boxクラスに対して2つのルールセットを用意します。1つは通常時（静的なデフォルト状態）の.zoom-box、もう1つは動的なホバー状態の.zoom-box:hoverです。
• 最初のルールセットには、見た目やサイズに関するプロパティ（height、width、color）を指定します。marginプロパティはボックスを中央に配置するためのもので、必須ではありません。
• .zoom-boxクラスの中で最も重要なのがtransitionプロパティです。変化の対象としてtransformを、所要時間として.2s（200ミリ秒）を指定しています。
• 2つ目のルールセット.zoom-box:hoverでは、transformプロパティにscale()メソッドを指定します。引数の1.5が、ホバー時にボックスをどれだけ拡大するかを決める値です。「1.5」は「元のサイズの150%」という意味になります。

ブラウザ対応

以下は、このチュートリアルのコードにベンダープレフィックスを追加したものです。Chrome、Firefox、Safari、Operaといった主要ブラウザすべてで問題なく動作します。

.zoom-box {
	background-color: #cf4b32;
	width: 100px;
	height: 100px;
	margin: 32px auto;
	-webkit-transition: -webkit-transform 0.2s;
	transition: -webkit-transform 0.2s;
	transition: transform 0.2s;
	transition: transform 0.2s, -webkit-transform 0.2s; /* アニメーション */
}

.zoom-box:hover {
	-webkit-transform: scale(1.5);
	        transform: scale(1.5);
}

知っておきたいポイント

transitionプロパティは.zoom-boxクラスにしか追加していないのに、ボックスは拡大時も縮小時も同じ時間・速度でアニメーションすることにお気づきでしょうか。

これは、transitionプロパティを元のクラスセレクター（.zoom-box）に指定すると、その値がクラスに付随するすべてのセレクターにも自動的に適用されるためです。今回の場合、該当するのは:hover（擬似クラスとも呼ばれます）です。

もしtransitionプロパティを:hover（擬似）セレクター側にだけ指定すると、アニメーションされるのは拡大時のみで、縮小時には適用されません。マウスがボックスから離れた瞬間、要素は0秒で一瞬にして元のサイズへ戻ってしまいます。これは視覚的に非常に唐突で、多くの場合望ましくない挙動です。

拡大時と縮小時でそれぞれ異なるアニメーションの種類や所要時間を使いたい場合は、:hover擬似クラスセレクターにもtransitionプロパティを追加し、別の値を指定するだけで実現できます。