CSS 點擊圖片出現大圖是網站設計中常見的效果，本文將介紹如何使用 CSS 實現這一效果。

首先，我們需要準備兩張圖片，一張是縮略圖，一張是大圖。

<img src="thumbnail.jpg" alt="縮略圖" class="thumbnail">
<img src="big.jpg" alt="大圖" class="big">

接下來，我們需要用 CSS 隱藏大圖，代碼如下：

.big {
display: none;
}

然后，我們給縮略圖添加點擊事件，當用戶點擊縮略圖時，將顯示大圖。代碼如下：

.thumbnail {
cursor: pointer;
}
.thumbnail:hover + .big,
.big:hover {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}

這段代碼實現了以下幾個功能：

• 給縮略圖添加了指針型鼠標
• 當用戶鼠標移上縮略圖時，大圖將顯示
• 當用戶鼠標移上大圖時，大圖依然顯示
• 大圖將在屏幕中央出現，并覆蓋在其他元素之上

通過上述方法，我們可以實現在網站中點擊縮略圖出現大圖的效果。