CSS

hover時に文字や画像をシュッと拡大させる方法【CSS】

拡大

リンクやボタンをわかりやすくするためにhoverをつけますよね。
今回は、hoverした際にテキストや画像を拡大する動きをCSSのみで実装してみます。

hover時に文字や画像をシュッと拡大させる方法

それでは早速進めていきます。
まずはHTMLを用意します。

今回はこんな感じ。
aタグにCSSを設定していきます。

では、CSSを書いていきます。

今回は、「transform」を使って拡大しています。
aタグについている「transition」はアニメーション完了までの時間を指定しています。
今回は0.3秒で完了するように設定しています。
好みに合わせて数値を変更してみてください。

今回の実装はこれだけ!
目着車簡単ですよね!
ダウンロードボタンとかに最近は実装したりしています。
ぜひ開発に使用してみてください。

ABOUT ME
シラツキ
当ブログは同人サークル「にんじんみるく」のシラツキが運営する個人ブログです。 同人誌即売会の情報やネタ、技術的な内容など様々なコンテンツを配信しています。 普段はwebサイト作ってる人インターネッツお絵かきマン。 Webサイトの制作、ECサイトの運営、ブログ、イラスト制作など色々やってます。 個人でWeb技術ブログ、趣味のブログ、YouTube活動中。

イラスト制作、webサイト制作、商品のご紹介など様々なお仕事を募集しております! 下記リンクよりお気軽にご連絡ください!

お仕事・ご依頼について

COMMENT

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

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