CSS實現圖片向上移動，可以通過以下幾個步驟來完成：

圖片的 CSS 樣式：
img {
position: relative;
top: 0;
transition: top 0.3s ease-in-out;
}
鼠標懸停的 CSS 樣式:
img:hover {
top: -20px;
}

在上述代碼中，我們首先定義了圖片的 CSS 樣式，包括將其設置為相對定位（relative）并將 top 屬性設置為 0。此外，我們還為圖片添加了一個過渡效果，以便在圖片移動時可以有一些動畫效果。

接下來，我們定義了鼠標懸停時的 CSS 樣式，其中將圖片的 top 屬性設置為 -20px。這將導致圖片在鼠標懸停時向上移動 20 像素。

最后，在 HTML 中，我們只需要將圖片嵌入到一個帶有 class 屬性的 div 元素中，然后在 CSS 中為該 div 元素添加一些基本樣式即可。例如：

HTML 代碼：
<div class="image-container">
<img src="image.jpg" alt="My Image">
</div>
CSS 樣式：
.image-container {
display: inline-block;
width: 300px;
height: 200px;
overflow: hidden;
}

在上述代碼中，我們定義了一個類名為 image-container 的 div 元素，并為其添加了一些基本樣式，如將其設置為內聯塊（inline-block），并將其寬度和高度分別設置為 300px 和 200px。此外，我們還將其 overflow 屬性設置為 hidden，這將確保我們只看到圖片的一部分，而不是整個圖片。

最后，我們只需將 img 元素的 class 屬性設置為該 div 元素的 class 屬性即可：

HTML 代碼：
<div class="image-container">
<img src="image.jpg" alt="My Image" class="image">
</div>
CSS 樣式：
.image {
position: relative;
top: 0;
transition: top 0.3s ease-in-out;
}
.image:hover {
top: -20px;
}

在上述代碼中，我們只是將 img 元素的 class 屬性設置為了 .image，這樣我們就可以在 CSS 中為其設置樣式了。同時，我們還可以使用 .image-container 類來設置 div 元素的樣式。