css图片放大 

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>

.box {
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #ccc;
}

.zoom {
    /* 缩放的元素 */
    -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;
}

</style>
</head>

<body>


 
<div class="box">
    <img src="image/53e1d4a2Nf68afe13.jpg" class="zoom">
</div>



</body>
</html>

 

posted @ 2017-10-12 14:51  CorderBob  阅读(126)  评论(0)  编辑  收藏  举报