CSS 實現圖片劃過變大是一種常見的交互效果，用戶在鼠標劃過圖片時，圖片會變得更大。這種效果可以使用戶更加關注圖片內容，增強用戶交互體驗。

要實現圖片劃過變大效果，需要使用 CSS transition 和 transform 屬性。首先，我們需要將圖片設置為初始狀態，即初始大小為 $100\%$。

img {
transition: all 0.3s ease-in-out;
transform: scale(1);
}

上面的代碼中，我們設置了 transition 屬性，用于指定變換的周期、變換方式和延遲時間。在這里，我們設置了 $0.3s$ 的周期，選擇了 ease-in-out 類型的變換，使得變換過程會有一定的緩動效果。同時，我們也設置了 transform 屬性，用于指定變換方式，這里我們使用了 scale 函數，將圖片的大小設置為 $100\%$。這樣，在頁面中加載圖片時，圖片就會以常規大小呈現。

接下來，我們需要在 CSS 中為圖片的鼠標劃過效果添加樣式，將圖片的大小設置為 $120\%$，使其變大。

img:hover {
transform: scale(1.2);
}

上述代碼中，我們使用了:hover 偽類選擇器，為鼠標劃過圖片時添加樣式，將 transform 屬性的比例設置為 $1.2$，使圖片變大。這樣，當用戶鼠標劃過圖片時，圖片就會按照我們指定的鼠標懸停效果變換大小。

除了 transform 屬性外，還可以通過改變圖片的 z-index 值，使圖片在鼠標懸停時彈出，并且覆蓋其他元素。使用 CSS 實現圖片劃過變大效果，可以增加頁面的動態交互，提升用戶體驗。