HTML+css3 圖片放大效果

<div class="enlarge">
    <img src="xx" alt="圖片"/>
</div>              

第一種效果 超出不隱藏

.enlarge{
    width: 200px;
    height: 200px;
    border: 1px #ffffff solid;
}
.enlarge img{
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: all 0.6s;
    -ms-transition: all 0.8s;
}
.enlarge img:hover{
    transform: scale(1.2);
    -ms-transform: scale(1.2);
}

第二種效果 超出隱藏

.enlarge{
    width: 200px;
    height: 200px;
    overflow: hidden;
    border: 1px #ffffff solid;
}
.enlarge img{
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: all 0.6s;
    -ms-transition: all 0.8s;
}
.enlarge img:hover{
    transform: scale(1.2);
    -ms-transform: scale(1.2);
}