CSS Web制作

【CSS】hover(マウスオーバー)で画像を拡大する方法

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

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

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

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

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!

累計1080部突破!レビュー550件!

hover(マウスオーバー)で画像を拡大する方法:imgタグの場合

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

コードを見ていきます。

<div class="sample-img">
  <img src="画像パス" alt="">
</div>
.sample-img {
  cursor: pointer;
  max-width: 500px;
  overflow: hidden;
  width: 100%;
}
.sample-img img {
  height: auto;
  transition: transform .6s ease; /* ゆっくり変化させる */
}
.sample-img:hover img {
  transform: scale(1.1); /* 拡大 */
}

transform: scale(1.1);で画像が拡大しています。

これは数字が大きいほど拡大し、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="sample-img">
  <img src="画像パス" alt="">
  <p>テキスト</p>
</div>
.sample-img {
  cursor: pointer;
  max-width: 500px;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.sample-img img {
  height: auto;
  transition: transform .6s ease; /* ゆっくり変化させる */
}
.sample-img:hover img {
  transform: scale(1.1); /* 拡大 */
}
.sample-img 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="sample-img">
  <img src="画像パス" alt="">
  <p>テキスト</p>
</div>
.sample-img {
  cursor: pointer;
  max-width: 500px;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.sample-img img {
  height: auto;
  transition: transform .6s ease; /* ゆっくり変化させる */
}
.sample-img:hover img {
  transform: scale(1.1); /* 拡大 */
}
.sample-img 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;
}
/* マスク */
.sample-img::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;
}
.sample-img: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』で画像を表示しています。

背景画像は.box-bgに表示させます。

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

 

画像の上に文字がある場合

画像の上に文字がある場合はこのようになります。

<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でマスクとテキストの順番を指定する


まとめ

今回はhover(マウスオーバー)で画像を拡大する方法を解説しました。

実務でもよくある実装だと思うので、ブクマしていつでもコピペ出来るようにしておくと便利かと思います。

以上になります。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1060部以上販売し、レビューは520件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる

-CSS, Web制作