リンクやボタンをわかりやすくするためにhoverをつけますよね。
今回は、hoverした際にテキストや画像を拡大する動きをCSSのみで実装してみます。
hover時に文字や画像をシュッと拡大させる方法
それでは早速進めていきます。
まずはHTMLを用意します。
[html]
<a href="">リンクテキスト</a>
<a href=""><img src="imgパス"></a>
[/html]
今回はこんな感じ。
aタグにCSSを設定していきます。
では、CSSを書いていきます。
[css]
a{
transition: 0.3s; /* 0.3秒で拡大までの時間 */
}
a:hover{
transform: scale(1.1); /* 1.1倍に拡大 */
}
[/css]
今回は、「transform」を使って拡大しています。
aタグについている「transition」はアニメーション完了までの時間を指定しています。
今回は0.3秒で完了するように設定しています。
好みに合わせて数値を変更してみてください。
今回の実装はこれだけ！
目着車簡単ですよね！
ダウンロードボタンとかに最近は実装したりしています。
ぜひ開発に使用してみてください。
ABOUT ME
