html鼠标浮动图片样式,无需JS和jQuery代码实现CSS3鼠标浮动放大图片

无需JS和jQuery代码实现CSS3鼠标浮动放大图片

.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 {

/* 垂直居中 */

display: inline-block;

width: 0; height: 100%;

vertical-align: middle;

}

左上角定位

居中定位

以上所述是小编给大家介绍的无需JS和jQuery代码实现CSS3鼠标浮动放大图片，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！