如何在圖片懸停時實現 CSS 過渡的平滑緩出效果？

CSS 過渡問題：緩入但不緩出

此問題涉及圖像的 CSS 過渡的實現。當滑鼠懸停在影像上時，影像會平滑地模糊，但當滑鼠離開時，它會突然恢復到原始狀態。所需的行為是影像逐漸擺脫模糊效果。此外，該問題探討了僅使用 CSS 在懸停時顯示文字的可能性。

緩出解決方案

要實現所需的緩出效果，請修改CSS 過渡設定透過將它們應用到元素本身，而不是應用到:hover偽類。這確保了在懸停和關閉時都會發生轉換：

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
}</code>

在懸停時添加文字

僅使用CSS 在將滑鼠懸停在圖像上時顯示文本，利用:after 偽元素：

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
}
.img-blur:after {
  content: "Learn More";
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  padding: 10px;
  border: 1px solid black;
  border-radius: 5px;
}
.img-blur:hover:after {
  display: block;
}</code>

透過以下調整，當滑鼠遊標離開時，影像將逐漸擺脫模糊效果，並且懸停時會出現文字。

以上是如何在圖片懸停時實現 CSS 過渡的平滑緩出效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！