當我們瀏覽網頁時，經常會遇到一種互動效果——當我們點擊圖片或文字時，會彈出一個帶有動畫效果的框框。這一效果其實是因為在CSS中通過:hover偽類實現的，我們得益于CSS3的不斷完善，現在不僅可以實現:hover，還可以利用:checked、:focus等更多的偽類效果。

那么讓我們來看一下怎樣通過CSS實現點擊圖片或文字彈出框框的效果吧！

/* 為圖片或文字添加一個類名，例如pop-up */
.pop-up {
position: relative; /* 相對定位，為偽元素定位提供參考 */
}
/* 當:hover時，顯示偽元素 */
.pop-up:hover::before {
content: ''; /* 必須要有內容，否則偽元素不顯示*/
position: absolute;
left: 0; /* 偽元素左邊距離為0 */
bottom: -100%; /* 偽元素默認在圖片下方，下邊距離為-100%表示不顯示 */
width: 100%; /* 偽元素寬度為100% */
height: 100%; /* 偽元素高度為100% */
background-color: rgba(0, 0, 0, 0.5); /* 偽元素為黑色半透明 */
transition: bottom 0.3s ease; /* 動畫過渡時間為0.3秒，速度為緩慢 */
}
/* 當:hover時，偽元素bottom為0，向上動畫彈出 */
.pop-up:hover::before {
bottom: 0;
}
/* 在偽元素中添加一個隨意的樣式 */
.pop-up:hover::before {
/* 在這里寫字或添加圖片，樣式隨意 */
color: #fff;
font-size: 20px;
text-align: center;
padding: 10px;
}

以上就是實現點擊圖片或文字彈出框框的CSS代碼。總體思路就是為元素添加:hover并使用偽元素:before，通過bottom屬性控制元素的動畫彈出和彈回，再通過在偽元素中添加樣式實現我們想要的特效。

希望這篇文章對大家有所幫助，讓你的網頁效果更加酷炫哦！