CSS 圖片與按鈕懸停效果 (Hover Effects)

懸停效果（Hover Effects）是提昇網頁互動感最直接的方式。透過 CSS 的 :hover 偽類結合 transition 或 animation，我們可以創造出絲滑且吸引人的轉場效果。

本篇將介紹幾種常見且實用的懸停特效。

圖片縮放效果 (Image Zoom)

這是最常見的一種效果，讓使用者感覺圖片像是「浮現」出來。

.img-container {
  overflow: hidden; /* 確保縮放時圖片不會超出容器 */
  width: 300px;
  border-radius: 12px;
}

.img-container img {
  width: 100%;
  transition: transform 0.5s ease; /* 平滑轉場 */
}

.img-container:hover img {
  transform: scale(1.1); /* 放大 1.1 倍 */
}

<div class="img-container">
  <img src="example.jpg" alt="範例圖片">
</div>

實作預覽

圖片文字覆蓋 (Overlay Text)

當滑鼠移到圖片上時，顯示說明文字或標題。

<div class="card">
  <img src="example.jpg" alt="風景圖">
  <div class="overlay">
    <h3>美麗的風景</h3>
    <p>點擊查看更多細節</p>
  </div>
</div>

.card {
  position: relative;
  width: 300px;
  overflow: hidden;
}

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0; /* 初始隱藏 */
  transition: opacity 0.3s ease;
}

.card:hover .overlay {
  opacity: 1; /* 懸停時顯示 */
}

實作預覽

按鈕光澤與陰影效果

提升按鈕點擊慾望的小技巧。

.btn {
  padding: 12px 24px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn:hover {
  background: #0056b3;
  transform: translateY(-3px); /* 向上微移 */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* 陰影加深 */
}

.btn:active {
  transform: translateY(-1px); /* 模擬按下的感覺 */
}

<button class="btn">懸停按鈕</button>

實作預覽

底部邊框滑出效果 (Underline Slide)

常用於導航列連結。

.nav-link {
  text-decoration: none;
  color: #333;
  position: relative;
  padding: 5px 0;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #007bff;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%; /* 從左滑向右 */
}

<a href="#" class="nav-link">返回首頁</a>

實作預覽

實踐建議

1. 不要過度設計：動畫應該是輔助性的，過多或過快的動畫會讓使用者感到眼花繚亂甚至不適。
2. 考慮效能：儘量使用 transform (scale, translate, rotate) 和 opacity 屬性來製作動畫，因為這些屬性可以由 GPU 加速，效能最好。避免在 hover 時改變 width、height 或 margin，這會觸發瀏覽器的重排（Reflow）。
3. 行動置相容性：記住行動裝置沒有「滑鼠懸停」。如果是關鍵功能（如顯示按鈕），不要只依賴 hover 效果。