【CSS】マウスオーバーで画像を拡大させる方法

2020-01-282020-04-08

今回は、Webサイト内の画像をマウスオーバーすると、その画像が徐々に拡大して表示される方法について、記載していきます。

jQueryは使用せず、CSSのみで完結します。

使われるケース

ブログのアイキャッチ画像などに、注意をひかせてクリックを誘導する目的で使われます。

サンプル

こちらからどうぞ。

方法

まずHTMLを下記のように記述したとします。

<div class="img-wrap">
　<img src="img1.jpg" alt="">
</div>

div要素の中に画像が1枚あるシンプルなものですね。

CSSは下記のように記述します。

.img-wrap {
      width: 400px;
      height: 200px;
      position: relative;
      overflow: hidden;
    }

    img {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      transition: transform  1s;
    }

    img:hover {
      transform: scale(1.5);
    }

注目する必要があるのは、画像の幅指定を「img」ではなく「img-wrap」で行っているということです。

「img-wrap」には「position:relative」を、「img」には「position:avsolute」「top:0」「left:0」「width:100%」を指定して、「img-wrap」に「img」がはみ出さずに覆いかぶさるような作りになっています。

画像をマウスオーバーした際の挙動指定は「img:hover」で行います。

「img:hover」には「transform: scale(1.5)」（数値は任意）を指定することで、「img」をマウスオーバーすると画像が拡大されるようになります。

ただ、このままでは画像が「img-wrap」からはみ出して表示されてしまいますので、「img-wrap」に「overflow: hidden」を指定することではみ出した部分を非表示にしましょう。

最後に、「だんだんと拡大する」というアニメーションになるように「img」に「transition: transform 1s」（数値は任意）を記載しましょう。

これで完成です。

以上となります。