CSS手觸改變圖片是一個在網(wǎng)頁設計中非常實用的技巧。通過CSS的:hover偽類選擇器，我們可以輕松實現(xiàn)鼠標懸停在圖片上時顯示不同的效果，如透明度變化、位置移動、陰影等。下面是一個簡單的示例代碼。

HTML部分：

<div class="image-container">
<img src="original-image.jpg" alt="Original Image">
</div>

CSS部分：

.image-container {
position: relative;
}
.image-container img {
transition: transform .3s ease;
}
.image-container:hover img {
transform: scale(1.1);
}

在上述代碼中，我們創(chuàng)建了一個div容器，并給其中的img標簽設置了一個原始圖片。通過CSS的position屬性，我們讓容器變?yōu)橄鄬Χㄎ唬瑸榱俗尯罄m(xù)的CSS效果能夠正常渲染。 然后在img標簽的CSS樣式中，我們選取了transform屬性，并設置了一個縮放比例為1.1，同時設置了過渡效果，讓縮放的變化更加平滑。 最后，在容器的:hover狀態(tài)下，我們選取了img標簽，并對其應用了transform:scale(1.1)的效果，當我們的鼠標懸停在圖片上時，可以清晰地看到圖片被放大了1.1倍的效果。 這是一個非常簡單的實例，鼠標懸停在圖片上時只有放大的效果改變，但是你可以根據(jù)需要調(diào)整CSS代碼，添加更多的效果，讓你的網(wǎng)頁設計更加生動有趣。