在网页设计中，让鼠标放上图片变暗是一种常见的交互体验。这种效果可以让用户更直观地感知到鼠标与元素的交互，从而提升用户体验。
实现这种效果的方法包括使用JavaScript、CSS3等技术。其中，使用CSS3的技术最为简单易用，这里我们来介绍一下如何使用CSS3来让鼠标放上图片变暗。
首先，我们要通过CSS3的伪类选择器:hover来选中鼠标放上去的状态。
img:hover {
/* 在这里设置变暗的效果 */
}
然后，我们使用CSS3的filter属性来添加图片变暗的效果。具体使用方法是将filter的值设置为brightness(50%)，这样图片就会变暗50%。
img:hover {
filter: brightness(50%);
}
当然，如果你想让变暗程度更大，可以将brightness的值调低，例如brightness(30%)。
最后，我们来看一下完整的实现代码：
img:hover {
filter: brightness(50%);
}
