CSS 中的點擊圖片隱藏效果能夠為網頁增添更多的互動性和美觀性，讓用戶有更好的體驗。

// HTML 代碼
<img src="image.jpg" class="hideable" alt="隱藏的圖片">
// CSS 代碼
.hideable {
opacity: 1;
transition: opacity .5s ease-in-out;
}
.hideable.hidden {
opacity: 0;
}
.hideable:hover {
opacity: 0.5;
cursor: pointer;
}
// JavaScript 代碼
var hideableImages = document.querySelectorAll('.hideable');
for (var i = 0; i< hideableImages.length; i++) {
hideableImages[i].addEventListener('click', function() {
this.classList.toggle('hidden');
});
}

代碼中，首先在 HTML 中為要隱藏的圖片添加了一個 class 名為 hideable，用來在 CSS 中取樣式。當圖片被點擊時，使用 JavaScript 給圖片添加或移除 class 名為 hidden，用來改變顯示狀態。

在 CSS 中，使用 opacity 屬性設置圖片的透明度，配合 transition 屬性實現從顯示到隱藏的漸變效果。同時，當鼠標懸停在圖片上時，設置圖片的透明度變為 0.5，以及鼠標樣式為手形，增加互動性。

通過上述代碼，在網頁中點擊圖片即可實現隱藏或顯示的效果。這種效果在網頁設計中廣泛運用，為網頁增添了更多的動態和美感。