CSS3 原生支持通过鼠标经过图片时使其变暗，可以为页面添加更多的视觉效果和互动性。在 CSS3 中，可以使用伪类选择器:hover来实现鼠标悬停效果。

img:hover {
filter: brightness(80%);
}

上面代码中，brightness函数用于调整图片的亮度，取值范围为 0-100%，80% 代表将亮度调整为原来的 80%。

如果需要在鼠标经过时向左侧平移图片，可以使用translateX()函数：

img:hover {
transform: translateX(-10%);
}

上面代码中，translateX()函数用于沿 X 轴平移元素，取值范围为任意长度单位。

如果需要同时调整亮度和平移图片，可以使用多个属性：

img:hover {
filter: brightness(80%);
transform: translateX(-10%);
}

上面代码中，filter属性用于调整图片的亮度，transform属性用于沿 X 轴平移元素。

在实际开发中，可以利用鼠标悬停事件为用户提供更加丰富的体验，例如在图片标题下方显示图片相关信息，或为图片添加动画效果。