2022/2/13

【CSS】hoverしたときに画像を拡大させる方法

CSS

hoverしたときに画像を拡大させるのってどうやるの？

そんな疑問にお答えします。

リンクをホバーすると画像が拡大されるエフェクトはよく見る実装です。

画像がヌルっとズームされる感じもかっこいいですよね。

今回はこの実装方法を誰でもわかるように、シンプルに解説します。

1 hoverしたときに画像を拡大させる方法(imgタグ)
2 hoverしたときに画像を拡大させる方法(background)

hoverしたときに画像を拡大させる方法(imgタグ)

完成形はこちらです。

See the Pen
hoverしたら拡大1 by toshi (@toshi78)
on CodePen.

手順①　画像をhoverしたときに拡大させる

<div class="picture">
  <img src="img/01.jpeg" alt="">
</div>

上のHTMLで画像をhoverしたときに拡大させようとすると、CSSはこうなります。

.picture:hover img {
  transform: scale(1.1);/*拡大*/
}

この動きは下のとおりです。

See the Pen
hoverしたら拡大2 by toshi (@toshi78)
on CodePen.

.pictureの要素の大きさを超えて画像が大きくなっているのがわかると思います。

手順②　はみ出た部分を非表示にする

はみ出た部分を隠すことによって、枠内でズームする動きが実現できます。

ここでは overflow: hidden; を使います。

.picture {
  width: 500px;
  margin: 0 auto;
  overflow: hidden;/*はみ出た部分は隠す*/
}
.picture:hover img {
  transform: scale(1.1);
}

See the Pen
hoverしたら拡大3 by toshi (@toshi78)
on CodePen.

これではまだ動きがカクカクしています。

ですのでもうひと手間必要です。

手順③　transitionでアニメーションの変化を調整する

変化前の状態（.picture img）にtransitionを指定することで、なめらかな動きとなります。

.picture {
  width: 500px;
  margin: 0 auto;
  overflow: hidden;
}

.picture img {
  width: 100%;
  height: auto;
  transition: all .6s;/*ゆっくり変化させる*/
}

.picture:hover img {
  transform: scale(1.1);
}

これで意図する動きとなりました。

hoverしたときに画像を拡大させる方法(background)

imgタグではなくbackgroundで画像を配置する場合も見ておきましょう。

See the Pen
hoverしたら拡大4 by toshi (@toshi78)
on CodePen.

<div class="picture">
  <div class="bg"></div>
</div>

.picture {
  width: 500px;
  margin: 0 auto;
  overflow: hidden;
}

.bg {
  background: url(画像パス)no-repeat center center / cover;/*背景画像表示*/
  width: 100%;
  height: 400px;
  transition: all .6S;
}

.picture:hover .bg {
  transform: scale(1.1);
}

背景画像をbackground-imageで表示しています。

今回はショートハンドでまとめて書いています。

あとのやっていることは先ほどと同じです。

以上です。