項(xiàng)目需要最近開始最html開發(fā)了，項(xiàng)目中需要用到鼠標(biāo)懸停時(shí)候圖片的放大效果,廢話少說(shuō)床佳，上代碼
<div class="listitem fl">
<img class="listitemimage">
<span>大個(gè)云南蒙自石榴（禮盒裝</span>
<span>￥128.00/12個(gè)</span>
</div>
css中的代碼
.listitem{
width: 100px;
height: 160px;
margin-left: 20px;
margin-top: 20px;
overflow: hidden;
}
.listitemimage{
width:100px ;
height: 100px;
background: url("../image/itemimage.png");
transition:all 0.6s;
}
.listitemimage:hover{
transform: scale(1.4);
}
注意
1.一定要dlistitem中用的是margin-left榄审，不是padding-left，否則不以中心縮放搁进。
2.一定要在父節(jié)點(diǎn)上面添加overflow: hidden;
