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

拡大CSS

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

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

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

<a href="">リンクテキスト</a>
<a href=""><img src="imgパス"></a>

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

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

a{
transition: 0.3s; /* 0.3秒で拡大までの時間 */
}
a:hover{
transform: scale(1.1); /* 1.1倍に拡大 */
}

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

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

コメント

タイトルとURLをコピーしました