【JavaScript&CSS】クリック（タップ）で画像を拡大させる

2024年2月1日

transform: scale;を使って、画像や図形を拡大表示させる方法を紹介します。
自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればとも思います！

なお、ホバー時のアニメーションについては以下記事でも紹介していますので、合わせてご覧ください。

ホバー時に文字を拡大表示（枠から溢れた部分は表示カット）する場合

HELLO WORLD

こちらの記事でコードを掲載

【CSS】文字や画像をホバーしたときにズームイン＆暗くするマウスを置いた（ホバーした）とき、文字や画像などの要素を拡大（要素サイズからはみ出た部分は非表示）したり暗くしたりする実装方法を紹介します。自分の学習・メモ…

ホバーやクリックで画像が拡大する実装3例（+1例）

マウスホバーで画像拡大

下のブロックにマウスをのせると、ブロックが2倍に拡大します。

マウスを離すと元に戻ります。

クリックで画像拡大

下のブロックをクリック（タップ）すると、ブロックが2倍に拡大します。

もう一度クリック（タップ）すると元に戻ります。

画像をフワッと拡大

下のブロックをクリック（タップ）すると、ブロックがフワっと2倍に拡大します。

もう一度クリック（タップ）するとフワっと元に戻ります。

モーダルウィンドウを利用して拡大（別記事）

右の画像をクリックまたはタップすると、画面中央に原寸大の画像をフワッと表示します。

画像を原寸大* で画面中央に表示するコードです。
オリジナルの画像自体が小さい場合は、拡大されません。

※表示画面より大きいサイズの場合、適正サイズまで縮小

クリック or タップで拡大します。
もう一度クリック or タップで閉じます。

こちらは本記事ではなく、以下記事で解説しています。

HTML / CSS / JavaScript コード

CSSのプロパティであるtransformを使うことで、画像や図形を移動させたり変形させたりできます。

transform: scale(x, y);と記述し、

「x」にはx軸(横)方向に何倍大きくさせるか
「y」にはy軸(縦)方向に何倍大きくさせるか

を指定します。

また、transform-originプロパティを使うと、要素のどの位置を基準にして拡大（縮小）するかを指定できます。
（変形後ではなく、変形前の元要素に記述する点に注意。）

transform: scale(0.5, 2);であれば、x軸方向に0.5倍、y軸方向に2倍の大きさとなります。
transform-origin: top left;であれば、要素の左上を基準にして拡大（縮小）します。
- 実装例はすべて、この指定にしてあります。
- デフォルトでは中央起点transform-origin: center;となっています。

マウスホバーで画像拡大

図形の上にマウスをホバーする（マウスを重ねる）だけで拡大します。（マウスを離すと元に戻る）
これはJavaScript不要で、HTMLとCSSだけで実装できます。
実装例ではCSSで装飾した図形を使っていますが、画像にも対応できます。

HTML/CSS コードはこちら

<div class="box_1"></div>

.box_1 {
  width: 100px;
  height: 100px;
  background-color: tomato;
  transform-origin: top left;
}

.box_1:hover {
  transform: scale(3, 3);
}

transform: scale(x, y);」で、対象範囲の拡大や縮小ができる。
xには横方向の拡大倍率、yには縦方向の拡大倍率を指定する。
この例では横に3倍、縦に3倍大きくするという意味になる。
「transform-origin」で、拡大の起点を指定できる。
この例（top left）では左上を起点に拡大するという意味になり、指定がないと中央が起点になる。

クリックで画像拡大

図形の上でクリック（またはタップ）すると拡大します。（もう一度クリック（タップ）をすると元に戻る）
実装例ではCSSで装飾した図形を使っていますが、画像にも対応できます。

HTML/CSS/JavaScript コードはこちら

<div class="box_2"></div>

.box_2 {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  transform-origin: top left;
}

.box_2:hover {
  cursor: zoom-in;
}

.box_2.scale {
  transform: scale(3, 3);
}

.box_2.scale:hover {
  cursor: zoom-out;
}

「transform: scale(x, y);」で、対象範囲の拡大や縮小ができる。
xには横方向の拡大倍率、yには縦方向の拡大倍率を指定する。
この例では横に3倍、縦に3倍大きくするという意味になる。
「transform-origin」で、拡大の起点を指定できる。
この例（top left）では左上を起点に拡大するという意味になり、指定がないと中央が起点になる。
「cursor: zoon-in;」と「cursor: zoon-out;」で、カーソルが虫眼鏡に変わる。

const box2 = document.querySelector('.box_2');

box2.addEventListener('click', () => {
  box2.classList.toggle('scale');
});

クリックで “scale” クラスの付け外しができるJavaScript。

画像をフワっと拡大

図形の上でクリック（またはタップ）すると、フワっと少し時間をかけて拡大します。
（もう一度クリック（タップ）をすると、同じように時間をかけて元に戻る）
実装例ではCSSで装飾した図形を使っていますが、画像にも対応できます。

HTML/CSS/JavaScript コードはこちら

<div class="box_3"></div>

.box_3 {
  width: 100px;
  height: 100px;
  background-color: limegreen;
  transform-origin: top left;
  transition: transform .3s;
}

.box_3:hover {
  cursor: zoom-in;
}

.box_3.scale {
  transform: scale(3, 3);
}

.box_3.scale:hover {
  cursor: zoom-out;
}

「transform: scale(x, y);」で、対象範囲の拡大や縮小ができる。
xには横方向の拡大倍率、yには縦方向の拡大倍率を指定する。
この例では横に3倍、縦に3倍大きくするという意味になる。
「transform-origin」で、拡大の起点を指定できる。
この例（top left）では左上を起点に拡大するという意味になり、指定がないと中央が起点になる。
「cursor: zoon-in;」と「cursor: zoon-out;」で、カーソルが虫眼鏡に変わる。
「transition: transform .3s;」で、transformというプロパティを0.3秒かけて変化させられる。

const box3 = document.querySelector('.box_3');

box3.addEventListener('click', () => {
  box3.classList.toggle('scale');
});

クリックで “scale” クラスの付け外しができるJavaScript。

まとめ

以上、ホバーやクリック（タップ）で特定の要素を拡大する方法を紹介しました。

商品写真など、画像を拡大して表示させたい場合にはぜひ実装しておきたいですね。
倍率や拡大させる起点などは自由に設定できるので、しっくりくる拡大方法を模索してみてください。

当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。