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

【CSS】ホバーで画像を拡大させる方法

こんにちは。

ゆうや(@yuyaphotograph)です!

この記事では、

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

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

要素を拡大/縮小させる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.

まとめ

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

 

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

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

【CSS】hover時に下線を引くアニメーションの作り方【CSS】hover時に左から右に下線を引くアニメーションの作り方 【jQuery初心者向け】ホバーで画像を切り替える方法【jQuery初心者向け】ホバーで画像切り替えを実装する方法

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です