如何用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中文网其他相关文章！