CSS的圖片疊層效果可以在網頁上的圖片上疊加其他的圖片，創建出更加生動的視覺效果。今天我們將介紹如何使用CSS實現圖片疊層點擊展開效果。

首先，我們需要準備兩張圖片。

<img src="pic1.jpg" alt="pic1">
<img src="pic2.jpg" alt="pic2">

然后，我們需要給這兩張圖片添加CSS樣式。我們可以使用以下代碼將兩張圖片疊加在一起：

img {
position: relative;
}
img:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(pic2.jpg);
background-repeat: no-repeat;
background-size: cover;
opacity: 0;
transition: opacity .5s;
}
img:hover:after {
opacity: 1;
}

這段CSS代碼的意思是，在原始圖片的前面添加一張疊加圖片，用after偽類來實現。我們在疊加圖片的CSS屬性中設置了背景圖片，使其全部覆蓋在原始圖片之上。同時，我們設置透明度為0，這樣點擊之前這張圖片是不可見的。當鼠標懸停在原圖片上時，我們通過設置: hover偽類將透明度從0變為1，實現了點擊圖片展示疊加圖片的效果。

最后，只需要在HTML中將兩張圖片包裹在一個鏈接中，點擊圖片就可以展示疊加圖片了：

<a href="#">
<img src="pic1.jpg" alt="pic1">
<img src="pic2.jpg" alt="pic2">
</a>

現在，我們已經成功地實現了圖片疊層點擊展開CSS效果！