如何用CSS實現懸停時模糊影像的平滑過渡？

緩和模糊影像的CSS 過渡

當使用CSS :hover 偽類將滑鼠懸停在影像上時，使用以下指令套用模糊濾鏡濾鏡屬性創造了視覺上吸引人的效果。然而，通常觀察到，滑鼠移開後影像會突然恢復到正常狀態。此行為可歸因於過渡階段缺乏「緩出」效果。

要解決此問題並確保兩個方向的平滑過渡，將過渡屬性應用於實際元素，而不僅僅是 :hover 偽類。這使得將滑鼠懸停在元素上和離開元素時可以順利進行過渡。

範例：

考慮以下程式碼片段：

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
}
.img-blur:hover {
  filter: blur(4px);
}</code>

這個更新的範例示範如何將過渡屬性應用到.img-blur類別而不是:hover 偽類來產生雙向操作的過渡。

其他增強功能：

另一個常見的要求是當滑鼠懸停在模糊影像上時在其上覆蓋文字。雖然這可以使用 JavaScript 來實現，但 CSS 方法提供了更有效率、更輕量的解決方案。操作方法如下：

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
  position: relative;
}
.img-blur:hover {
  filter: blur(4px);
  position: absolute;
  z-index: 1;
}
.img-blur:hover .text-overlay {
  display: block;
}

.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  text-align: center;
  display: none;
}</code>

此程式碼引入了一個 .text-overlay 元素，預設情況下該元素是隱藏的。當滑鼠懸停在影像上時，:hover 偽類激活，使覆蓋層可見並將其與模糊影像對齊。這種方法可以更好地控製文字疊加的樣式。

以上是如何用CSS實現懸停時模糊影像的平滑過渡？的詳細內容。更多資訊請關注PHP中文網其他相關文章！