画像の上にマウスポインタを乗せたら画像が少し拡大するアニメーションをCSSで簡単に実現する

ブログなどでよく見る、画像の上にマウスポインタを乗せたら画像が少し拡大するアニメーションのやり方をご紹介します。CSSだけで実現できますので簡単です。

まずはHTMLの部分。

<div class="scaling">
 <img src="画像のURL">
</div>

imgタグをdivタグで囲っただけのシンプルなものです。

続いてこのHTMLに適用するCSSの部分。

.scaling {
    overflow: hidden;
}

.scaling img {
    -moz-transition: -moz-transform 0.1s linear;
    -webkit-transition: -webkit-transform 0.1s linear;
    -o-transition: -o-transform 0.1s linear;
    -ms-transition: -ms-transform 0.1s linear;
    transition: transform 0.1s linear;
}

.scaling img:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

まずimgタグを囲む要素にはみ出した部分を表示しないようにするoverflow:hidden;を適用しています。

次にimgタグに適用している0.1sの部分で拡大アニメーションのスピードを設定しています。数値が少ないほど早く、多いほど遅くなります。

最後にimgタグに:hover類似クラスのscale(1.1)の部分で拡大する大きさを設定しています。scale(1.0)を基準として数値が大きいほど拡大され、逆に1.0以下にすると縮小されます。