CSS技術可以實現頁面的各種效果，其中點擊彈出圖的效果是非常常見的。在本文中，我們將學習如何使用純CSS創建一個點擊彈出圖的效果。

/* HTML代碼 */
點擊我彈出圖
/* CSS代碼 */
.container {
position: relative;
}
.trigger {
display: block;
width: 200px;
height: 50px;
background-color: #333;
color: #fff;
text-align: center; 
line-height: 50px; 
}
.popup {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 200px;
background-color: #fff;
border: 1px solid #333;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
visibility: hidden;
opacity: 0;
transition: all 0.3s;
}
.trigger:focus ~ .popup,
.popup:hover {
visibility: visible;
opacity: 1;
}
.popup img {
max-width: 100%;
max-height: 100%;
display: block;
margin: 0 auto;
}

在HTML代碼中，我們創建了一個父容器，里面包含了一個觸發器和一個彈出框，其中觸發器是一個鏈接，彈出框是一個帶有圖片的DIV，它默認是不可見的。

在CSS代碼中，我們給父容器設置了相對定位，同時設置了觸發器和彈出框的樣式。觸發器設置了背景色、文字顏色、寬度和高度，同時使用了行高來使文字垂直居中。彈出框設置了相對父容器的絕對定位、寬高、邊框、內邊距和陰影，并將可見度和透明度都設置為0，即默認不可見。

接著我們使用CSS選擇器“~”和“:focus”來定義當觸發器被點擊時，顯示彈出框。使用“~”選擇器可以將觸發器和彈出框的設置關聯起來，即只有當觸發器在彈出框的前面時才生效；使用“:focus”可以使觸發器在被點擊后保持焦點狀態，直到用戶點擊其他元素，這樣就可以保證彈出框一直顯示。

最后，我們在彈出框中放置了一張圖片，并設置了最大寬度和高度以使其適應彈出框的大小，同時使用了“margin:0 auto”來使圖片水平居中。

通過這些CSS代碼，我們可以實現一個簡單而又實用的點擊彈出圖的效果。