對于網頁設計來說，圖片的運用可以讓網頁顯得更加生動活潑。而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可以方便我們實現基于鼠標位移的圖片效果，這樣可以讓網頁更加有趣，也可以為用戶提供更好的交互體驗。