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

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

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

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

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

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

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

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

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

transform: scale(0.8);/* 縮小 */コピー

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

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

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

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

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

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

ただ単にホバーで画像を拡大させたい場合は以下の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で指定しているのはアニメーションの速度ですのでそこはよしなに変更してくださいまし。

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

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

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

.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;/*これを追加！*/
}コピー

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

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

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

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

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

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

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

.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;
}コピー

デモ

まとめ

今回紹介したホバーエフェクトの実装方法はブログカードをコーディングする際に要求される頻度が比較的高いので覚えちゃいましょう〜

「ホバーで実装できることを増やしてスキルアップしたい！」

という方は以下の記事にも目を通してみてくださいまし〜