リンクにカーソルが乗った時に文字や画像が拡大

リンクのホバー時に拡大表示させる

道路工事きもまろことワンタンです!w こんにちワ (^∇^)

リンクにしている文字にカーソル（マウス）が乗った時に、そのリンクが少し大きく表示されるようにするCSSを使った方法を御案内してみたいと思います。
なお、この方法はスマホやタッチパネル方式のパソコンで見た場合は反映されません。通常のキーボード方式のパソコンのみで有効です。

テキストリンクのホバー時に文字を拡大させる

こんな感じで、カーソルを乗せるとリンク文字が大きくなります（↓）。

サンプルリンク

また、画像リンクも、カーソルを乗せると少し大きくなります（↓）。

hoverリンクのテスト

【方法】
CSSの末尾に以下のコードを貼り付けて下さい。

/*オンマウス時にテキスト拡大：10:02*/
.articleText a {
display: inline-block;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
.articleText a:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

※上の仕様はブログ記事欄のリンクにのみ反映されます。サイドバー、ヘッダー等も含めたサイト全体に反映させたい場合は、上のコードの二カ所のセレクタ：.articleTextを削除して下さい。

**参考**
こちらのサイト様を参考にさせて頂きました。
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α | NxWorld

CSSのみで実装するボタンデザインやホバーエフェクト 20＋α | NxWorld

■こんな設定をしてやると、「これはリンクですよ～～！！」って、分かりやすくなったりすると思います。ま、あくまでもお好みですけれど・・^^;

☆ブィブィ  ('-^*)/