【CSS】hoverしたら画像を拡大する方法

画像をhoverしたら拡大するにはどうすればいい？

hoverしたら画像を拡大させるのは実務でも非常に良くある実装になります。

画像を表示させるにはimgタグとbackground-imageの2種類の方法があります。

今回は両方のケースで画像を拡大する方法を解説していきます。

hoverしたら画像を拡大する方法（imgタグ）

まずはimgタグを使った場合です。

コードを見ていきます。

<div class="img-wrapper">
  <img src="画像パス" alt="">
</div>

.img-wrapper {
  cursor: pointer;
  max-width: 500px;
  overflow: hidden;
  width: 100%;
}
.img-wrapper img {
  height: auto;
  transition: transform .6s ease;/* ゆっくり変化させる */
}
.img-wrapper:hover img {
  transform: scale(1.1);/* 拡大 */
}

transformは数字を大きくするほど画像が拡大し、1.0未満だと縮小します。

ポイントはoverflowで、これがないと画像が親要素からはみ出てしまいます。

こちらがデモになります。

See the Pen
hoverで画像拡大 by junpei (@junpei-sugiyama)
on CodePen.

overflowが無いとどうなるか

ちなみにoverflowが無いとこうなります。

See the Pen
hoverで画像拡大（overflowなし） by junpei (@junpei-sugiyama)
on CodePen.

テキストがある場合

テキストがある場合はこのようになります。

<div class="img-wrapper">
  <img src="画像パス" alt="">
  <p>テキスト</p>
</div>

.img-wrapper {
  cursor: pointer;
  max-width: 500px;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.img-wrapper img {
  height: auto;
  transition: transform .6s ease;/* ゆっくり変化させる */
}
.img-wrapper:hover img {
  transform: scale(1.1);/* 拡大 */
}
.img-wrapper p {
  align-items: center;/* テキストの中央揃え */
  bottom: 0;
  color: #fff;/* テキストの色 */
  display: flex;/* テキストの中央揃え */
  justify-content: center;/* テキストの中央揃え */
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 80%;/* テキストを横幅いっぱいにならないようにする */
}

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

マスクをかける

さらにマスクをかけたい場合はこちらになります。

<div class="img-wrapper">
  <img src="画像パス" alt="">
  <p>テキスト</p>
</div>

.img-wrapper {
  cursor: pointer;
  max-width: 500px;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.img-wrapper img {
  height: auto;
  transition: transform .6s ease;/* ゆっくり変化させる */
}
.img-wrapper:hover img {
  transform: scale(1.1);/* 拡大 */
}
.img-wrapper p {
  align-items: center;/* テキストの中央揃え */
  bottom: 0;
  color: #fff;/* テキストの色 */
  display: flex;/* テキストの中央揃え */
  justify-content: center;/* テキストの中央揃え */
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 80%;/* テキストを横幅いっぱいにならないようにする */
  z-index: 2;
}
/* マスク */
.img-wrapper::before {
  background: rgba(0, 0, 0, .5);/* マスクの色(黒の50%) */
  bottom: 0;
  content: '';
  height: auto;
  left: 0;
  opacity: 0;/* 最初は透明（非表示） */
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity .6s ease;/* ゆっくりopacityのみへ変化させる */
  width: 100%;
  z-index: 1;
}
.img-wrapper:hover::before {
  opacity: 1;
}

See the Pen
hoverで画像拡大（テキスト、マスクあり） by junpei (@junpei-sugiyama)
on CodePen.

これは【CSS】画像をhoverしたら透過させた黒いマスクをかけ、テキストを表示させる方法の応用になりますが、

テキストとマスクにz-indexを書かないとマスクが反映されなかったり、数値を間違えるとテキストの上にマスクがきてテキストも暗くなるのでご注意下さい。

hoverしたら画像を拡大する方法（background-image）

次はbackground-imageを使った場合です。

<div class="box">
  <div class="box-bg"></div>
</div>

.box {
  cursor: pointer;
  max-width: 500px;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.box-bg {
  background-image: url(画像パス);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 350px;
  transition: transform .6s ease;
  width: 100%;
}
.box:hover .box-bg {
  transform: scale(1.1);
}

See the Pen
hoverでbackground-imageを拡大 by junpei (@junpei-sugiyama)
on CodePen.

今度はimgタグではなく背景画像のbackground-imageになります。

背景画像はclass名 .box-bg に表示させます（背景画像なのでimgではなくbackground-imageの頭文字をclass名にしています）

あとは基本的な所は同じかと思います。

テキストがある場合

テキストがある場合はこのようになります。

<div class="box">
  <p>テキスト</p>
  <div class="box-bg"></div>
</div>

.box {
  cursor: pointer;
  max-width: 500px;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.box-bg {
  background-image: url(画像パス);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 350px;
  transition: transform .6s ease;
  width: 100%;
}
.box:hover .box-bg {
  transform: scale(1.1);
}
.box p {
  align-items: center;/* テキストの中央揃え */
  bottom: 0;
  color: #fff;/* テキストの色 */
  display: flex;/* テキストの中央揃え */
  justify-content: center;/* テキストの中央揃え */
  left: 0;
  margin: auto;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 80%;/* テキストを横幅いっぱいにならないようにする */
  z-index: 1;
}

See the Pen
hoverでbackground-imageを拡大（テキストあり） by junpei (@junpei-sugiyama)
on CodePen.

マスクをかける

さらにマスクをかけたい場合はこちらになります。

<div class="box">
  <p>テキスト</p>
  <div class="box-bg"></div>
</div>

.box {
  cursor: pointer;
  max-width: 500px;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.box-bg {
  background-image: url(画像パス);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 350px;
  transition: transform .6s ease;
  width: 100%;
}
.box:hover .box-bg {
  transform: scale(1.1);
}
.box p {
  align-items: center;/* テキストの中央揃え */
  bottom: 0;
  color: #fff;/* テキストの色 */
  display: flex;/* テキストの中央揃え */
  justify-content: center;/* テキストの中央揃え */
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 80%;/* テキストを横幅いっぱいにならないようにする */
  z-index: 2;
}
/* マスク */
.box::before {
  background: rgba(0, 0, 0, .5);/* マスクの色(黒の50%) */
  bottom: 0;
  content: '';
  height: auto;
  left: 0;
  opacity: 0;/* 最初は透明（非表示） */
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity .6s ease;/* ゆっくりopacityのみへ変化させる */
  width: 100%;
  z-index: 1;
}
.box:hover::before {
  opacity: 1;
}

See the Pen
hoverでbackground-imageを拡大（テキスト&マスクあり） by junpei (@junpei-sugiyama)
on CodePen.

まとめ

ポイントは、

overflowで親要素からはみ出させないようにする
z-indexでマスクとテキストの順番を指定する

となります。今回は以上になります。