CSS

ホバー(hover)時に文字や画像を拡大させるCSS

リンクをホバーする際にリンクなのかクリックできるのかわかりやすくするためにはホバー のアニメーションは必須です。
今回はホバー したテキストや画像が少し大きくなるアニメーションを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倍に拡大 */
}

以上!
いろいろなホバーエフェクトを紹介しているので、制作の参考にしてみてください!

ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)