小编给大家分享一下css3怎么实现鼠标放上图片放大效果，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！
我们都知道css3中增加了一个transform属性应用于元素的2D或3D转换，transform属性允许我们对元素进行旋转、缩放、移动或倾斜。所以对于css3实现图片放大是需要用到transform属性的，下面我们就来看看css3使用transform属性实现图片放大的效果。
第一种：css3实现当我们把鼠标放到图片上图片放大并且超出部分不隐藏的效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.enlarge{
width: 300px;
height: 300px;
border: 1px #ffffff solid;
}
.enlarge img{
width: 100%;
height: 100%;
cursor: pointer;
transition: all 0.6s;
-ms-transition: all 0.8s;
}
.enlarge img:hover{
transform: scale(1.2);
-ms-transform: scale(1.2);
}
</style>
</head>
<body>
<div class="enlarge">
<img src="images/tu.jpg" alt="图片"/>
</div>
</body>
</html>css3实现鼠标放上图片放大的效果前后对比如下：
第二种：css3实现当我们把鼠标放到图片上图片放大并且超出部分隐藏的效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.enlarge{
width: 300px;
height: 300px;
overflow: hidden;
border: 1px #ffffff solid;
}
.enlarge img{
width: 100%;
height: 100%;
cursor: pointer;
transition: all 0.6s;
-ms-transition: all 0.8s;
}
.enlarge img:hover{
transform: scale(1.3);
-ms-transform: scale(1.3);
}
</style>
</head>
<body>
<div class="enlarge">
<img src="images/tu.jpg" alt="图片"/>
</div>
</body>
</html>css3实现鼠标放上图片放大的效果前后对比如下：
说明：对于上述的两种css3实现图片放大的情况，都用到了:hover伪类，表示了鼠标悬停时候的状态，这样当我们把鼠标放到图片上的时候就会让图片放大，当鼠标移除，图片就会恢复原有的大小。
看完了这篇文章，相信你对css3怎么实现鼠标放上图片放大效果有了一定的了解，想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
