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

JavaScriptとCSSで画像や図形を拡大・縮小するコード

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

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

拡大表示のとき、要素サイズから溢れた部分はカットする場合

HELLO WORLD

ブラウザはGoogle Chromeを使い、Wordpress上で実装しています。

目次

実装例(3つ)

下のブロックにマウスをのせると、ブロックが拡大します。(4倍)
マウスを離すと元に戻ります。

コード

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

画像を拡大(縮小)するには「transform: scale(x, y);」と記述し、xにはx軸(横)に何倍大きくさせるか、yにはy軸(縦)に何倍大きくさせるかを指定します。

「transform: scale(0.5, 2);」であれば、x軸方向に0.5倍、y軸方向に2倍の大きさとなります。

マウスホバーで画像を拡大

図形の上にマウスをホバーする(マウスを重ねる)だけで拡大します。(マウスを離すと元に戻る)
これは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(4, 4);
}
  • transform: scale(x, y);」で、対象範囲の拡大や縮小ができる。
    xには横方向の拡大倍率、yには縦方向の拡大倍率を指定する。
    この例では横に4倍、縦に4倍大きくするという意味になる。
  • 「transform-origin」で、拡大の起点を指定できる。
    この例では左上を起点に拡大するという意味になり、指定がないと中央が起点になる。

クリックで画像を拡大

図形の上でクリック(またはタップ)すると拡大します。(もう一度クリック(タップ)をすると元に戻る)
実装例では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(4, 4);
}

.box_2.scale:hover {
  cursor: zoom-out;
}
  • 「transform: scale(x, y);」で、対象範囲の拡大や縮小ができる。
    xには横方向の拡大倍率、yには縦方向の拡大倍率を指定する。
    この例では横に4倍、縦に4倍大きくするという意味になる。
  • 「transform-origin」で、拡大の起点を指定できる。
    この例では左上を起点に拡大するという意味になり、指定がないと中央が起点になる。
  • 「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(4, 4);
}

.box_3.scale:hover {
  cursor: zoom-out;
}
  • 「transform: scale(x, y);」で、対象範囲の拡大や縮小ができる。
    xには横方向の拡大倍率、yには縦方向の拡大倍率を指定する。
    この例では横に4倍、縦に4倍大きくするという意味になる。
  • 「transform-origin」で、拡大の起点を指定できる。
    この例では左上を起点に拡大するという意味になり、指定がないと中央が起点になる。
  • 「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。
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ノベルティグッズのECサイトを運営する中小企業役員。
本ブログを通じ、販促向けの最新/ロングセラー商品紹介やWebサイト制作に役立つ技術情報を発信しています。

目次