今天我要給大家分享一個(gè)CSS圖片放大的DEMO，讓大家了解怎樣能夠讓圖片隨著鼠標(biāo)懸浮變大。 下面是展示效果：

懸浮鼠標(biāo)使圖片變大

.img-zoom {
display: block;
width: 100%;
max-width: 350px;
transition: transform .2s;
margin: auto;
overflow: hidden;
}
.img-zoom:hover {
transform: scale(1.1);
}

首先，在HTML文件中我們需要為圖片標(biāo)簽添加一個(gè)class命名為“img-zoom”。接下來，在CSS代碼中，我們定義了兩個(gè)用于對(duì)圖片進(jìn)行放大的樣式：.img-zoom和.img-zoom:hover。 在.img-zoom樣式中，我們?cè)O(shè)置圖片的默認(rèn)顯示樣式。具體來說，我們?cè)O(shè)定圖片的寬度為100%，最大寬度為350px，使用了transition來控制圖片變化的過程，同時(shí)，圖片的margin值為auto，使其水平居中。為了防止圖片的外部容器被圖片放大撐開，我們?cè)O(shè)置了overflow：hidden。 接下來，在.img-zoom:hover樣式中，我們使用transform屬性將圖片放大至原本大小的1.1倍。當(dāng)鼠標(biāo)離開圖片時(shí)，圖片會(huì)按照同樣的過渡時(shí)間以動(dòng)畫形式恢復(fù)原始大小。 當(dāng)我們完成了CSS的編寫后，只需要在HTML文件中應(yīng)用該樣式即可。通過以上代碼，您就可以讓圖片在用戶懸停鼠標(biāo)時(shí)變大，從而更好地吸引用戶的注意力。 到此，本次關(guān)于CSS圖片放大的DEMO分享就結(jié)束了。感謝您的耐心閱讀！