hover effect

ホバー効果とは
ホバー効果 とは、ユーザーがマウスカーソルを要素（ボタン、画像、リンクなど）の上に乗せたとき、見た目や動きを変えるための効果です。
CSSでは :hover 疑似クラス を使って実現します。

要素セレクタ:hover {
プロパティ: 値;
}
button {
background-color: #3498db; /* 通常時の青 */
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}

button:hover {
background-color: #2980b9; /* ホバー時に少し濃い青 */
}

テキストの色を変える
a:hover {
color: red;
}

画像を拡大する（ズームイン）
img {
transition: transform 0.3s ease;
}

img:hover {
transform: scale(1.1);
}

シャドウを追加する
.box {
width: 150px;
height: 150px;
background: #eee;
transition: box-shadow 0.3s ease;
}

.box:hover {
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

⚙️ 4. トランジション（transition）を使う

ホバー時にスムーズなアニメーションを作るには、transition プロパティを使います。

button {
background-color: #2ecc71;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #27ae60;
}

色の変更 color, background-color テキストや背景色を変更
拡大・縮小 transform: scale() 要素を大きく・小さく
回転 transform: rotate() 要素を回転させる
影の追加 box-shadow 浮き上がるような効果
アニメーション transition スムーズな変化を追加