今天我们演示一个简单的图片灰度颜色切换的效果。首先，我们展示一张完全灰度的图片，看起来毫无生气。当我们将鼠标放在图片上时，色彩逐渐恢复，让人感到柔和而富有生机。当我们离开图片时，它又恢复了完全的灰度状态。接下来，我们将详细讲解如何实现这个效果。

html部分非常简单，只有一个包含图片的div。现在，我们将为其添加一些基本样式。其他样式将在后续步骤中重新设置。

·我们先看一下当前的布局。由于图片较大，因此无法完整显示，出现了滚动条。我们需要调整布局，使图片的宽度为100%，居中显示。我们将使用伪元素来定位灰度图片，并将其放在左上角。

·接下来，我们将使用上一张图片作为背景图，并添加100%灰度的滤镜效果。请注意，背景图的包含块现在可能不正确，因为它基于窗口大小计算。我们将为父元素开启定位，并将其作为包含块。现在，大小和位置都没有问题，但是背景图的显示位置仍然需要调整。我们将设置背景图片的background-size属性，使其等比例铺满整个父元素。现在，一切都已准备就绪。

·接下来，我们将为image添加一个鼠标移入的伪类，并通过控制伪元素的宽度或高度来实现切换效果。我们将控制before元素的宽度为0，并添加一个过渡效果。现在，当我们将鼠标放在图片上时，色彩会逐渐恢复。当我们离开图片时，它会自动切换回完全的灰度状态。

以上就是这个视频的全部内容，感谢大家的观看。