CSS圖片點擊是網頁設計中常見的一種特效，可以增加網頁的豐富性，提升用戶體驗。下面就介紹一下CSS如何實現圖片點擊顯示圖片的方法。

<div class="img-box">
<img src="image-1.jpg" alt="圖片1">
<img src="image-2.jpg" alt="圖片2">
<img src="image-3.jpg" alt="圖片3">
</div>
<div class="img-preview">
<img src="big-image-1.jpg" alt="大圖片1">
</div>

首先，在HTML中，需要創建一個包含多張圖片的容器，如上面的div.img-box，這里使用了3張圖片作為例子。同時，需要準備好展示大圖片的容器，如上面的div.img-preview，這個容器一開始是隱藏的。

/* CSS 代碼 */
.img-box img {
width: 150px;
height: 150px;
margin: 10px;
border: 1px solid #ccc;
cursor: pointer;
}
.img-preview {
display: none;
}
.img-preview img {
max-width: 100%;
max-height: 100%;
}

接下來，在CSS中，需要給圖片設置一些基本的樣式，如上面的代碼。這里為了能夠使圖片可以點擊，需要將cursor屬性設置為pointer。

在CSS中，可以通過:hover選擇器實現鼠標懸停時的效果。將具有.img-box類的容器中的所有圖片設置:hover效果，如下代碼：

/* CSS 代碼 */
.img-box img:hover {
opacity: 0.7;
}
.img-box img:hover + .img-preview {
display: block;
}
.img-box img:nth-child(1):hover + .img-preview img {
display: block;
}
.img-box img:nth-child(2):hover + .img-preview img {
display: none;
}
.img-box img:nth-child(3):hover + .img-preview img {
display: none;
}

這里使用了+選擇器，表示選擇后面緊跟著的元素，如上面的.img-preview。當鼠標懸停在圖片上時，會觸發.opacity屬性，讓圖片顯示為半透明狀態。同時，通過顯示隱藏來切換展示img-preview的容器和其中的圖片，需要根據具體情況來調節圖片的顯示和隱藏屬性。

這里需要注意的是，在這個例子中，img-preview容器僅支持展示一張圖片，可以將在HTML代碼中的img標簽的src屬性替換成對應的大圖來實現圖片的切換。

以上就是使用CSS實現圖片點擊顯示圖片的方法，可以根據實際需要進行相應的調整，以適應不同的網頁設計需求。