对于网页设计来说，图片的运用可以让网页显得更加生动活泼。而CSS中还有一种图片效果，就是根据鼠标的位移进行相应的变化。接下来，我们就来介绍一下如何实现这种效果。

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

上述代码中，我们使用了:hover的伪类选择器来实现对鼠标位移的响应。transform属性可以让元素进行位移、变形等操作，在这里我们给图片设置了一个水平向左10像素的位移。当鼠标移动到图片上方时，图片会产生这样的一个效果。

img:hover{
transform: translateY(-10px);
}

如果我们想要让图片向上移动，只需要将上面的代码修改一下即可，将其中的translateX改为translateY即可。同样的，我们可以通过设置不同的transform值，来实现不同方向的位移效果。

img:hover{
box-shadow: 0 0 10px #ccc;
}

除了位移效果，我们还可以通过box-shadow属性来实现一个简单的阴影效果。当鼠标移动到图片上方时，图片会出现一个灰色的阴影，这样效果也会让图片看起来更加立体。

总结来说，使用CSS可以方便我们实现基于鼠标位移的图片效果，这样可以让网页更加有趣，也可以为用户提供更好的交互体验。