css3怎么实现鼠标放上图片放大效果

发布时间：2020-09-14 11:24:34 阅读：247 作者：小新栏目：web开发

前端开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

小编给大家分享一下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怎么实现鼠标放上图片放大效果

第二种：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>