zoom 前台_鼠标hover元素scale/zoom中心点放大效果实例页面

CSS代码：

.box {

/* 可见视觉区域 */

width: 480px; height: 250px;

position: relative;

overflow: hidden;

cursor: pointer;

}

.size {

/* 广阔的海洋 */

width: 1000px; height: 1000px;

position: absolute; left: 50%; top: 50%;

margin: -500px 0 0 -500px;

/* 水平居中 */

text-align: center;

}

.zoom {

/* 缩放的元素 */

width: 480px; height: 250px;

vertical-align: middle;

-webkit-transition: -webkit-transform .2s;

transition: transform .2s;

}

.box:hover .zoom {

/* hover放大 */

-webkit-transform: scale(1.05);

-ms-transform: scale(1.05);

transform: scale(1.05);

zoom: 1.05;

}

:root .box:hover .zoom {

zoom: 1;

}

.middle {

/* 垂直居中 */