html中鼠标悬停之后图片放大效果

项目需要最近开始最html开发了，项目中需要用到鼠标悬停时候图片的放大效果,废话少说，上代码

      <div class="listitem fl">
        <img class="listitemimage">
        <span>大个云南蒙自石榴（礼盒装</span>
        <span>￥128.00/12个</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.一定要在父节点上面添加overflow: hidden;