リンクをホバーする際にリンクなのかクリックできるのかわかりやすくするためにはホバー のアニメーションは必須です。
今回はホバー したテキストや画像が少し大きくなるアニメーションをCSSのみで実装する方法を紹介します。
ホバー（hover）時に文字や画像を拡大させるCSS
まずはHTMLです。
※今回は「aタグ」に直接当てていますが、classで作ってあげておくと共通の動きのところにclassを当てるだけで実装できるので便利です。
<a href="">リンクテキスト</a> <a href=""><img src="imgパス"></a>
続いてCSS。
時間指定と「transform」で拡大率を指定してあげます。
a{
transition: 0.3s; /* 0.3秒で拡大までの時間 */
}
a:hover{
transform: scale(1.1); /* 1.1倍に拡大 */
}
以上！
いろいろなホバーエフェクトを紹介しているので、制作の参考にしてみてください！
web制作を勉強したい方におすすめの教材も紹介しているので是非参考にしてみてください。
web制作の勉強にオススメの書籍を紹介します！
ABOUT ME
