css图片放大

图片缩放效果实现

最新推荐文章于 2024-06-29 15:08:15 发布

转载最新推荐文章于 2024-06-29 15:08:15 发布 · 65 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Doduo/p/7656072.html

<!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>