【HTML5】网页实用技巧5：鼠标移上去图片放大（父级盒子大小不变）-使用 CSS3 属性制作
作者：互联网
需要实现的效果：鼠标移上去，图片放大，但是图片所在的父级盒子大小不变
实现思路：利用CSS3 的 transform 属性实现放大，给父级元素使用 overflow 属性
（1）制作一个 div ，用来作为图片的父级盒子
（2）使用 img 标签，引入图片，设置图片大小和父级盒子一样
（3）给图片使用伪类选择器 :hover
（4）图片放大，transform 属性值，使用 scal() 函数
（5）给父级盒子，添加 overflow : hidden;
（6）使用过渡属性 transition ，优化动画
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片放大-王迪</title>
<style type="text/css">
.product{
margin:20px auto;/*设置盒子水平居中*/
width: 200px;
height: 200px;
border:5px solid red;/*设置边框属性,这里为了更清晰的看到效果,边框较粗*/
overflow: hidden;/*设置超出部分隐藏,如果不设置该属性,图片放大后，会盖住父级盒子*/
}
.product img{
width: 100%;/*设置图片宽度100%,是相对于父级*/
height: 100%;
}
.product img:hover{
transform: scale(1.2);/*设置图片放大1.2倍*/
transition: 2s;/*过渡属性,设置完成放大所用时间2秒*/
}
</style>
</head>
<body>
<div class="product">
<img src="img/6.jpg"/>
</div>
</body>
</html>
===========这里是结束分割线============
标签：CSS3,实用技巧,盒子,父级,移上去,放大,设置,图片,属性 来源： https://blog.csdn.net/dnruanjian/article/details/111610746