在Web設計中，鼠標經過圖片右移是一種常見的效果。它可以使頁面更加動態有趣，為用戶帶來更好的交互體驗。這個效果可以通過CSS的:hover偽類和transition屬性來實現。

/* CSS代碼 */
.img-container {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
.img-container:hover img {
transform: translateX(50%);
transition: all 0.5s ease-out;
}
.img-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}

代碼中首先定義了一個圖片容器，然后設置了它的寬度和高度，并將overflow屬性設置為hidden，這樣超出容器大小的部分就不會被顯示出來了。在:hover偽類的影響下，圖片通過transform屬性向右移動了50%，同時設置了一個過渡效果，時長為0.5秒。在非鼠標懸停狀態下，圖片還原成原來的位置。

在使用這個效果時，還需要注意一些細節。為了使圖片在移動時不覆蓋其他元素，需要將圖片的position屬性設置為absolute，并將容器的position屬性設置為relative。此外，為了兼容不同的瀏覽器，需要添加一些瀏覽器前綴，如-webkit-、-moz-等。

總之，在Web設計中，鼠標經過圖片右移是一種常見的效果，它可以使頁面更加生動有趣，為用戶帶來更好的體驗。通過使用CSS的:hover偽類和transition屬性，我們可以很容易地實現這個效果。