CSSを使用してホバーで要素をズーム/スケールアップする方法

transformを使用して、純粋なCSSでホバー時に要素をズーム/スケールアップする方法を学びます プロパティの変換メソッド：scale() 。

ホバー時にズーム/スケールアップ

このボックスの上にマウスを移動してみてください。

元のサイズのちょうど1.5倍に拡大されるため、マウスを上に移動（ホバー）すると50％大きくなります。

CSSのtransform プロパティのscaleメソッドは、要素のサイズを増減できます。 3Dと2Dの両方で機能します。この簡単な例では、2Dを使用します。

上記の例を再現するには、1つのHTML要素と2つのCSSルールセットが必要です。

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; /* Animation */
}

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

それでおしまい！

コードの仕組み

• 最初に、zoom-boxというクラス属性を持つHTMLdiv要素を作成します。 。
• 次に、ズームボックスクラス用に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; /* Animation */
}

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

知っておきたい

transitionのみを追加した場合でも、box要素は同じ遷移期間/タイミングでスケールアップおよびスケールダウンすることに注意してください。 .zoom-boxのプロパティ クラス。

これは、transition プロパティが元のクラスセレクター（.zoom-box）に追加されます ）、その値は、クラスにアタッチされているすべての追加セレクターに自動的に追加されます。この場合は、:hoverです。 （疑似クラスとも呼ばれます ）

transitionのみを追加する場合 :hoverのプロパティ （疑似）セレクタークラス。スケールアップ部分のみをアニメートし、スケールダウンはアニメートしません。ボックス要素の外側に移動するとすぐに、ゼロ（0s）の期間で突然スケールダウンします。これは、目に厳しいため、めったに必要ありません。

要素のさまざまな状態（上/下）でさまざまなアニメーションタイプと期間を使用する場合は、transitionを追加するだけです。 :hoverのプロパティ 疑似クラスセレクターで、異なる値を指定します。