在網頁設計中，經常會使用圖片來增加頁面的美觀和吸引力。而有時又需要在多張圖片之間進行切換，在這種情況下，我們可以使用純CSS來實現點擊切換圖片。

HTML代碼：

<div class="gallery">
<input type="radio" name="img" id="img-1" checked>
<label for="img-1"><img src="image1.jpg"></label>
<input type="radio" name="img" id="img-2">
<label for="img-2"><img src="image2.jpg"></label>
<input type="radio" name="img" id="img-3">
<label for="img-3"><img src="image3.jpg"></label>
</div>

在HTML代碼中，我們將多張圖片和其對應的radio和label放入一個名為“gallery”的div中，radio的name屬性保證它們屬于同一組，id和label中的for屬性用于綁定radio和label，使得當點擊label時，對應的radio被選中。

CSS代碼：

.gallery {
position: relative;
display: inline-block;
}
.gallery input[type=radio] {
display: none;
}
.gallery label {
position: absolute;
top: 0;
left: 0;
opacity: 0;
cursor: pointer;
transition: opacity .5s;
}
.gallery label img {
max-width: 100%;
height: auto;
}
.gallery input[type=radio]:checked + label {
opacity: 1;
z-index: 1;
}

CSS代碼中，主要是對“.gallery”進行定位，對radio和label進行樣式設置。對radio設置display:none來隱藏radio，對label設置opacity:0來隱藏標簽。當radio被選中時，對應的label的opacity會變為1，使其出現在頁面中，并且z-index:1，使其“浮”在其他元素的上面。

通過以上代碼，我們便可以實現點擊切換圖片的效果，而且不需要使用任何JavaScript代碼。