【CSS】hover時にtransform:scale()で画像を拡大表示させる方法

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

画像をマウスオーバーしたときに拡大させるエフェクトをCSSでどうやって実装するのか知りたい
CSS ホバーで画像が拡大するデモを見たい
transform: scale()を使ってみたい

という方のお悩みを解決します！

要素を拡大/縮小させるtransform:scale()
imgタグで画像を表示する場合
- シンプルに拡大させるコード
- 若干暗くして拡大させるコード
divタグの背景画像で画像を表示する場合
まとめ

要素を拡大/縮小させるtransform:scale()

ホバーした時に画像を拡大表示させる実装のポイントとなるのはCSSのtransform:scale()です。

transform:scale()は要素を拡大 or 縮小させるもので、scale(1.1)のように引数に縮小比率を渡して使います。

scale()の引数に1.1以上の値を指定すると拡大に。
0.9以下を指定すると縮小となります。

以下、指定方法の例です。

transform: scale()の使い方例

transform: scale(1.2);/* 拡大 */

transform: scale(0.8);/* 縮小 */

imgタグで画像を表示する場合

画像をimgタグで表示する際は以下のようなHTML構造で実装します。

HTML

<div class="ImgBox">
  <img src="画像のパス" class="ImgBox-Img">
</div>

拡大させたいimgタグをdivタグで囲っただけのシンプルな構造となっております。

以下で2種類のホバーエフェクトを紹介しますが両者とも使用するHTMLは共通です。

シンプルに拡大させるコード

ただ単にホバーで画像を拡大させたい場合は以下のCSSを使ってあげましょう〜

CSS

.ImgBox{
  width: 280px;
  height: 200px;
  overflow: hidden;
}
.ImgBox-Img{
  transition-duration: 0.3s;
}
.ImgBox-Img:hover{
  transform: scale(1.2);
  transition-duration: 0.3s;
}

transition-duarationで指定しているのはアニメーションの速度ですのでそこはよしなに変更してくださいまし。

シンプルに拡大させるデモ

See the Pen
zYGQMjj by 石森裕也 (@yuyaphotograph)
on CodePen.

若干暗くして拡大させるコード

上述のコードに2行書き加えるだけで、ホバー時に画像に黒いマスクをかけることができます。

CSS

.ImgBox{
  width: 280px;
  height: 200px;
  overflow: hidden;
  background: #000;/*これを追加！*/
}
.ImgBox-Img{
  transition-duration: 0.3s;
}
.ImgBox-Img:hover{
  transform: scale(1.2);
  transition-duration: 0.3s;
  opacity: 0.6;/*これを追加！*/
}

若干暗くして拡大させるデモ

See the Pen
LYVoXBq by 石森裕也 (@yuyaphotograph)
on CodePen.

divタグの背景画像で画像を表示する場合

上述した「imgタグで画像を表示する方法」ですが、ぼくが普段Web制作の案件でカードデザインの要素をコーディングする時は実はほとんどその方法は使いません。

ではどうやってimgタグを使わず画像を表示させるコーディングをするのか？

ちょっと見慣れないかもしれませんが以下のように子要素のdivタグに直接backgroundで画像パスを指定してやる方法を使うのです。

HTML

<div class="ImgBox">
  <div class="ImgBox-Img" style="background: url('画像のパス') no-repeat center;backgruond-size:cover;"></div>
</div>

CSSは以下のように記述してあげれば上述したimgタグでのコーディング同様にホバーで画像拡大が実装できますよ！

CSS

.ImgBox{
  width: 320px;
  overflow: hidden;
  background: #000;
}
.ImgBox-Img{
  width: 100%;
  padding-top: 75%;
  transition-duration: .3s;
}
.ImgBox-Img:hover{
  transition-duration: .3s;
  transform: scale(1.2);
  opacity: .6;
}

デモ

See the Pen
qBdGQQg by 石森裕也 (@yuyaphotograph)
on CodePen.