如何在图像悬停时实现 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中文网其他相关文章！