[CSS][アニメーション] カーソル・マウスを合わせると要素をズーム・拡大させる

　記事にカーソルを合わせると拡大・ズームするようなアニメーションを実現するCSSについて書きます。

　記事一覧や画像に適用すると要素に注目させやすくなります。

　CSS追記してクラス指定するだけなのでWordPress使ってる人にも簡単に使えます。

アニメーションさせるCSS

　transitionプロパティでアニメーションする対象と何秒かけるかについてを記載。ここではtransformを指定しています。

　transformプロパティは要素を回転や拡大させることができます。ここでは拡大を指定します。hoverなのでカーソル・マウスがあったときに動作します。

　このクラスをタグに指定すれば、カーソル・マウスを合わせると要素をズーム・拡大するようになります。

　秒数、拡大率はお好みで調整してください。

.zoom-content {
	transition: transform .2s;
}

.zoom-content:hover {
	transform: scale(1.02);
}

　このページの記事一覧でこのアニメーションを導入しているので見てみてください。