【HTML・CSSアニメーション】hoverして画像を拡大する方法

今回は駆け出しWebデザイナーが覚えておくべき『hoverで画像を拡大する方法』をご紹介します。

実際の実装にも非常によく使用する方法ですので、この記事を読んでしっかり自分のスキルにしちゃいましょう！

imgタグを拡大する方法

それでは画像であるimgタグを拡大する方法をご説明します。

そのコードはいたって簡単なものになります。
では実際に下記画像のimgをhoverして拡大しましょう。

コードはこちらです。（画像はローカルのものになるのでここでは実装できませんでした。実装したアニメーションは下の方に記載してます。）

See the Pen Untitled by ちきんまさ@Web自由人 (@koujousijousyug) on CodePen.

CSSで「position」を「absolute」にしているのは、画像を親要素の範囲の画面縦横中央にするためです。

そしてhover時に「transform: scale;」で1.1倍に拡大しています。
下の記述の「transition」でその変化の速さを指定しています。

実際のhover時の変化がこちらです。

あとは好みで変化の速さなどを調節したらいい感じに仕上がります。
意外に簡単ですよね！

ちなみに親要素からはみ出ないように拡大したい場合は、「overflow: hidden;」を親要素に指定してください。

ちきんまさBLOG