在網頁設計中，有時我們需要用到圖片點擊放大的功能，讓用戶看到更多細節。而 CSS 樣式則是實現此目的的一種方式。

首先，我們需要在 HTML 中嵌入一張圖片：

<div class="img-box">
<img src="img/example.jpg">
</div>

接著，在 CSS 中添加樣式：

.img-box {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.img-box img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
transition: all 0.3s ease-out;
}
.img-box:hover img {
opacity: 0.5;
transform: scale(1.2);
}

上述代碼中，我們使用了position、width、height等屬性來控制圖片展示的大小和位置，使用了overflow屬性來處理圖片溢出的問題。

在圖片懸停時，我們使用了opacity和transform屬性來實現透明和放大效果。同時，我們使用了transition屬性來控制動畫效果的過渡時間。

通過以上代碼，我們成功實現了圖片點擊放大的功能，讓用戶可以更好地欣賞圖片細節。當然，我們還可以通過添加 JavaScript 代碼來實現更多高級功能，如可拖動、全屏模式等。