CSS是現在網頁設計中最重要的技術之一，它可以幫助我們制作出各種華麗的效果。其中之一就是點擊放大圖片效果，下面就來一起學習如何制作這個效果。

/* HTML代碼 */
<div class="box">
<img src="example.jpg" alt="example image">
</div>
/* CSS代碼 */
.box {
position: relative;
width: 300px;
height: 200px;
}
.box img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.box:hover img {
transform: scale(1.5);
transition: transform 0.5s ease;
}

首先，我們要在HTML中添加一個包含圖片的div，這個div的寬度和高度可以自己設定。然后在CSS中，我們將這個div的position屬性設為relative，這樣我們才能在里面創建絕對定位的圖片。

在.box img樣式中，我們將圖片的width和height都設為100%，并使用object-fit:cover屬性來保持圖片長寬比例，使其填充滿整個div。接著，我們使用box:hover img選擇器，當鼠標懸停在div上時，將圖片的transform屬性設為scale(1.5)，即放大1.5倍。同時，我們還加上了transition屬性來讓放大效果更加平滑。

以上就是點擊放大圖片效果的制作方法。不過如果你想實現更加復雜的效果，比如點擊彈出模態框等，需要用到JavaScript來實現。CSS和JavaScript的結合，可以讓我們打造出更加炫酷的網頁效果。