CSS可以用來在圖片上覆蓋另一張圖片，實現多種效果，以下是一個簡單示例：

<div class="container">
<img src="image1.jpg" alt="" class="bottom-img">
<img src="image2.jpg" alt="" class="top-img">
</div>
.container {
position: relative;
}
.bottom-img {
z-index: 1;
}
.top-img {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}

上面的代碼中，我們在一個容器中放置了兩張圖片，其中底部的圖片使用了一個較低的層級z-index，而上面的圖片使用了一個較高的層級，而且還加上了定位position:absolute，這樣它就可以覆蓋在下面的圖片上了。

如果你想讓覆蓋的圖片透明度一些，可以使用opacity屬性：

.top-img {
position: absolute;
top: 0;
left: 0;
z-index: 2;
opacity: 0.5;
}

這樣就可以讓上層圖片半透明了。

如果你想讓圖片只在鼠標懸停時出現，可以使用:hover偽類：

.container:hover .top-img {
opacity: 1;
}

這樣當鼠標懸停在容器上時，上層的圖片就會變成不透明。

此外，你還可以使用各種CSS過渡效果和動畫效果來使兩張圖片之間過渡更加平滑。