CSS点图片明暗变化是一种非常有趣且实用的技术。它可以让我们在网页设计中，通过一些简单的代码，实现图片的鼠标悬停明暗变化效果，从而增加网页的视觉效果。

//将图片的灰度值设为0，即原始状态
img{
filter: grayscale(0);
}
//将图片的灰度值设为1，即黑白效果
img:hover{
filter: grayscale(1);
}
//设置过度动画效果
img{
transition: all 0.3s ease-in-out;
}

上述代码中我们使用filter属性来实现图片的灰度变化，然后使用transition属性来设置过度动画效果。其中，filter: grayscale可以设置图片的灰度值，取值范围为0~1，0为原始状态，1为完全灰度，我们可以通过设置:hover来控制灰度的变化。在这里，我们设置transition为all 0.3s ease-in-out，它可以让图片的变化效果更加平滑自然。

我们可以通过上述代码在网页中轻松实现图片的明暗变化效果，提升网页的设计感和视觉效果。同时，我们可以通过更改filter属性的值来实现不同的效果，例如模糊、反转等多种效果，让网页设计更加有趣和富有创意。