在網頁設計中，有時候需要給圖片添加放大顯示的效果，這樣可以更好地展示圖片的細節和特色。而CSS就可以實現這種效果。接下來我們就來看看如何使用CSS使圖片點擊變大。

HTML代碼：
<div class="img-container">
<img src="img.jpg" alt="圖片">
</div>
CSS代碼：
.img-container {
position: relative;
}
.img-container img {
transition: transform 0.3s ease-in-out;
}
.img-container img:hover {
transform: scale(1.2); /* 圖片變大的比例 */
cursor: pointer; /* 鼠標移動到圖片上時變為手型光標 */
}

首先，我們需要使用一個div容器來包含圖片。這個div容器需要設置position: relative，這樣圖片才能相對于容器進行放大操作。

接著，我們需要給圖片添加transition屬性，這樣使圖片變化時會有漸變效果。我們設置的是transform屬性，也就是圖片的變換屬性。其中，0.3s是變化的持續時間，ease-in-out是變化的速度函數。

最后，我們使用:hover偽類，使鼠標在圖片上懸停時觸發圖片的放大效果。我們使用transform屬性，并設置值為scale(1.2)，意思是將圖片的大小放大1.2倍。同時，我們還將鼠標的樣式設置為手型光標，讓用戶知道可以點擊圖片進行放大。

通過這樣的操作，我們就能夠實現圖片點擊變大的效果了。當然，如果需要更加豐富的效果，我們還可以嘗試其他的樣式設置，比如使用box-shadow屬性來添加投影效果等等。