CSS點擊小圖瀏覽大圖是一個常見的網站必備功能，它可以在不離開當前頁面的情況下讓訪問者預覽大圖。

// HTML結構
<div class="gallery">
<a href="image1.jpg">
<img src="thumb1.jpg" alt="圖片1"/>
</a>
<a href="image2.jpg">
<img src="thumb2.jpg" alt="圖片2"/>
</a>
<a href="image3.jpg">
<img src="thumb3.jpg" alt="圖片3"/>
</a>
<a href="image4.jpg">
<img src="thumb4.jpg" alt="圖片4"/>
</a>
</div>
// CSS樣式
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gallery a {
margin: 10px;
position: relative;
}
.gallery img {
display: block;
width: 200px;
height: 200px;
}
.gallery a:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
border-radius: 50%;
background-image: url('zoom.png');
background-repeat: no-repeat;
background-position: center;
}
.gallery a:hover:after {
background-color: rgba(0, 0, 0, 0.5);
}
// JavaScript代碼
$('.gallery').on('click', 'a', function(e) {
e.preventDefault();
var imageUrl = $(this).attr('href');
var $modal = $('
').addClass('modal').appendTo('body');
var $img = $('').attr('src', imageUrl).appendTo($modal);
var $close = $('
').addClass('close').appendTo($modal);
});
$(document).on('click', '.modal .close', function() {
$('.modal').remove();
});

首先是HTML結構，使用<a>標簽包含縮略圖，將大圖的鏈接放在 href 屬性里面。

接下來是CSS樣式，通過添加偽元素來實現用圖標的方式表示可點擊預覽，鼠標放上去后使用<a:hover>屬性添加黑色半透明背景色。

最后是JavaScript代碼，給<a>標簽綁定點擊事件，在頁面中添加<div>元素和<agt;元素，<div>元素用來實現黑色半透明背景，<agt;元素用來關閉預覽功能。