css3鼠标滑过图片放大

css:样式

.bigpic {

width:200px;

heigth:200px;

overflow: hidden;

}

.bigpic:hover img{
    transform: scale(1.1);
    transition: all 1s ease 0s;
    -webkit-transform: scale(1.1);
    -webkit-transform: all 1s ease 0s;
    -moz-transform :scale(1.1);
    -moz-transform :all 1s ease 0s;
}

html:结构

<div class="bigpic">
          <a href="javascript:void(0)" >
                      <img style="" src="../../styles/img/timg.png">
           </a>
</div>

个人理解：利用transform放大，transition来用作动画，在父级中固定宽度或百分宽度，如果图片放大后超出隐藏边缘