CSS 圖片懸浮效果，能夠使圖片在鼠標(biāo)懸浮時(shí)，出現(xiàn)一些動(dòng)態(tài)的效果，比如放大、漸變等，讓網(wǎng)頁(yè)動(dòng)起來(lái)，增強(qiáng)用戶體驗(yàn)。下面我們就來(lái)介紹一下如何實(shí)現(xiàn)這種效果。

.img:hover {
transform: scale(1.2);
transition: transform 0.3s ease-in-out;
}

首先我們需要讓圖片在懸浮時(shí)產(chǎn)生效果，這里我們使用 :hover 偽類(lèi)來(lái)實(shí)現(xiàn)，然后加上 transform 屬性，我們可以選擇 scale 來(lái)放大圖片，這里我們?cè)O(shè)置了 1.2 倍，也可以自己根據(jù)需求調(diào)整。最后一行代碼是我們的過(guò)渡效果，讓圖片放大時(shí)有一個(gè)漸變的過(guò)程。

.img {
position: relative;
display: inline-block;
}
.img .text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.img:hover .text {
opacity: 1;
}

除了放大圖片外，我們還可以添加一些文字效果，當(dāng)鼠標(biāo)懸浮在圖片上時(shí)，文字可以漸現(xiàn)，這樣使得圖片更有吸引力。上面的代碼實(shí)現(xiàn)了這個(gè)功能，首先我們?cè)O(shè)置了圖片為相對(duì)定位，文字為絕對(duì)定位，然后通過(guò) transform 屬性讓文字垂直、水平居中。我們把文字的 opacity 屬性設(shè)置為 0，使得文字一開(kāi)始是不可見(jiàn)的，然后通過(guò) hover 偽類(lèi)，改變 opacity 屬性來(lái)產(chǎn)生漸現(xiàn)效果。

到此為止，我們就實(shí)現(xiàn)了圖片懸浮效果和文字漸現(xiàn)效果。這種效果可以應(yīng)用于各類(lèi)需要增強(qiáng)用戶體驗(yàn)的地方，比如展示商品、介紹產(chǎn)品和服務(wù)等。