マウスオーバーで画像を拡大する

最近、マウスオーバーで画像拡大して欲しいなんてお仕事を依頼されることが多いです。
今時？のサイトっぽくして欲しいということのようです。（2020年9月現在）

そんなわけで、先日サイト制作の練習でやってみたらあれ？
ということが起きたのでメモしておきます。

その時に書いたコードがこちら。

<div class="image_wrap">
  <a href="#">
   <img src="https://memo.yodayasu.com/wp-content/themes/coading_memo/img/demo_img_01.jpg" alt="デモ画像1">
  </a>
</div>
<h2>ブログタイトル</h2>

.image_wrap{
  width:300px;
  margin:0 auto;
  overflow:hidden;
}

.image_wrap img{
  width:100%;
  margin-bottom:1rem;
  transition:0.5s linear;
  display:block;
}

h2{
  margin:0;
  text-align:center;
}

.image_wrap a img:hover{
  transform:scale(1.2);
}

こんな感じでコーディングしました。

ポイントは

• imgの親要素にoverflow:hiddenではみ出た部分は見えないようにする
• imgにカーソルを合わせたときにtransform:scale(1.2)で拡大
• transiton:0.5s linearでぬるっと動かす
• imgに display:block または vertical-align:bottom を付与。

ですが…

実際にマウスホバーをしてみると

ブログタイトル

画像が下まで拡大してしまう…

なんでやっ！
ってなってWeb検索しまくりだったんですが解決方法がみつからず。

原因はmargin

よく思い出してみよう…
昨日は出来ていたのにできなくなった理由は何だろう…
と考えること30分。

原因は画像とブログタイトルの間に入れたマージンでした。

imgにmargin-bottom:1remとしてしまったため、
マージンの部分まで画像が広がってしまう、というものでした。

それを踏まえてCSSを書き直すと

.image_wrap{
  width:300px;
  margin:0 auto 1rem;　/*←margin-bottomをこちらに設定*/
  overflow:hidden;
}

.image_wrap img{
  width:100%;
 /* margin-bottom:1rem;←これがいらない*/
  transition:0.5s linear;
  display:block;
}

h2{
  margin:0;
  text-align:center;
}

.image_wrap a img:hover{
  transform:scale(1.2);
}

のように書き直しました。
divタグではなくH2タグにmargin-top:1remを設定してもOK。

それでは実際に動かしてみます。

ブログタイトル

やっと思い通りの動作をしてくれました。

今回のポイントは、
マウスオーバーで画像拡大するときは、画像自体にマージンをつけるな！
です。

あと、画像に display:block または vertical-align:bottom をつけるのをお忘れなく！（この記事を書いているとき忘れてまして…ハハッ🙄）