css实现鼠标移动图片上放大效果

标签：

<div class="new_img gallery cf">
    <div>
   <a href=""><img src="images/new_left.png"  ></a>
    </div>
</div>

样式：

.new_img{ width: 270px; height: 180px; float: left; overflow: hidden;}

/*鼠标移动图片放大效果*/
.gallery {
    width: 100%;
    margin: 0 auto;
}

.gallery > div {
    position: relative;
    float: left;
}

.gallery > div  img {
    width: 100%;
    transition: .1s transform;
    transform: translateZ(0);
    /* hack */
}

.gallery > div:hover {
    z-index:333;
}

.gallery > div:hover  img {
    transform: scale(1.3,1.3);
    transition: .3s transform;
}

.cf:before, .cf:after {
    display: table;
    content: "";
    line-height: 0;
}

.cf:after {
    clear: both;
}
/*鼠标移动图片放大效果*/