【CSS】超簡単にリンク画像にアニメ―ションをつける方法

最近ではリンクのhover（マウスオーバー）で動きをつけるのが当たり前になってきました。

そこで既存のサイトで簡単に動きをつける方法をご紹介します。

今回はサイト全体で一気に設定を変えてしまう方法です。

特定箇所だけに反映したい場合は対象箇所に修正してください。

リンクになっている画像（img）をhoverで大きくする

a img{
	transform: scale(1,1);
	transition:transform 0.5s;
}
a img:hover{
	transform: scale(1.05,1.05);
	transition:transform 0.5s;
}

transform＝サイズの指定です。

transition＝
第一パラメータ⇒変更するスタイル
第二パラメータ⇒速度

となります。

下のボタンはサンプルです（こちらはピンポイントで指定しています。）

これでサイト全体のaタグに入ったimg（画像）がhover時に少し大きくなり、hoverアウトの時に元に戻ります。

指定するスタイルを変えれば他のスタイルでも変更できます。（HTMLによってはうまくいかな場合もあるので注意）

例えば、よく使われるopacityを使えばマウスオーバーで明るくなったり（実際は透明度を下げる）します。

最近ではスマホからのアクセスが多いので、マウスオーバーが必要ないということもありますが、動きがあるサイトというのはしっかり作られているサイトという印象を与えますので実装してみるのもいいと思います。