HTML+css3 图片放大效果

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

第一种效果 超出不隐藏

.enlarge{
     200px;
    height: 200px;
    border: 1px #ffffff solid;
}
.enlarge img{
     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{
     200px;
    height: 200px;
    overflow: hidden;
    border: 1px #ffffff solid;
}
.enlarge img{
     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);
}
原文地址:https://www.cnblogs.com/yyr0208/p/9345980.html