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

WEBサイトで画像にマウスが乗ると、画像が拡大して表示されるアニメーションをよく見かけます。

アニメーションは見ているユーザーの興味をひかせたり、心地よいアニメーションでついクリックや動作を確かめたくなったりしますよね。

今回は、マウスオーバーで画像を拡大させる方法をご紹介していきたいと思います！

関連記事：CSSが反映されない・適用されない原因とは？効かない時の対処法を解説！

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

それでは早速、CSSを使ったアニメーションを作っていきたいと思います。

以下のような手順で進めていきます。

htmlで画像要素を作成

まずは、以下のようなHTMLを作成します。

<div class="is_hover">
  <a href="####"><img src="images/image.jpg" alt="Image"></a>
</div>

上記のHTMLに対して、CSSのアニメーションを作成

次に、上記のHTMLに対してCSSのアニメーションを作成してきます。

以下のようにCSSを作成します。

.is_hover{
  width: 300px;
}

.is_hover a {
  width: 100%;
  overflow: hidden;
}

.is_hover img {
  height: auto;
  transition: ease 0.3s;
}

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

ここまで書き終わりましたら、実際の表示をブラウザで確認してみましょう。

無事に画像が拡大できれたら完了です。

このアニメーションのポイントは、親要素の「.is_hover」にoverflowプロパティを追加し、値を「hidden」にする事です。

このプロパティを追加する事で、画像がマウスオーバーしても、要素の中で拡大されるようになります。

また、「transition」プロパティを追加する事で、マウスオーバーの動きが滑らかになります。

まとめ

マウスオーバーで要素が拡大されるCSSアニメーションさせる方法のご紹介でしたが、いかがだったでしょうか。

CSSアニメーションにご興味のある方は、是非一度試してみて下さい！