CSS中圖片從中心放大是網(wǎng)站設(shè)計(jì)中非常重要的一個(gè)技巧，可以在頁面美化上起到很大的作用。以下是實(shí)現(xiàn)從中心放大的CSS代碼：

.img{
position: relative;
display: inline-block;
cursor: pointer; /*鼠標(biāo)放上去變成手型*/
overflow: hidden; /*超出范圍隱藏*/
}
.img img{
transition: all 0.5s ease-in-out; /*圖片的過渡效果*/
}
.img:after{
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0; /*寬度為0*/
height: 0; /*高度為0*/
border-radius: 50%; /*變成圓形*/
background-color: rgb(255,255,255,0.8); /*背景顏色，這里設(shè)置為半透明白色*/
transform: translate(-50%,-50%); /*向上向左移動(dòng)50%*/
z-index: 1; /*覆蓋下面的圖片*/
opacity: 0; /*初始透明度為0*/
}
.img:hover:after{
width: 200%; /*寬度為原來的兩倍*/
height: 200%; /*高度為原來的兩倍*/
opacity: 1; /*透明度為1，變成不透明*/
transition: all 0.3s ease-in-out; /*過渡時(shí)間為0.3秒*/
}
.img:hover img{
transform: scale(1.2); /*圖片放大1.2倍*/
}

以上代碼實(shí)現(xiàn)了當(dāng)鼠標(biāo)放上去的時(shí)候，圖片從中心放大，并且在圖片上方出現(xiàn)一個(gè)半透明白色的圓形遮罩，給人一種非常時(shí)尚的感覺。

使用這個(gè)技巧可以讓網(wǎng)站的圖片在視覺上更加突出和吸引人，增加用戶的粘性和留存率。