超级会员免费看
本文介绍了如何使用CSS3的transform属性和overflow属性，实现鼠标悬停时图片放大，但其父级盒子大小不变的效果。通过创建div作为图片父级盒子，设置img大小与盒子相同，结合:hover伪类选择器，使用transform: scale()函数放大图片，并添加overflow: hidden;及transition过渡属性，完成平滑的动画效果。
需要实现的效果：鼠标移上去，图片放大，但是图片所在的父级盒子大小不变
实现思路：利用CSS3 的 transform 属性实现放大，给父级元素使用 overflow 属性
（1）制作一个 div ，用来作为图片的父级盒子
（2）使用 img 标签，引入图片，设置图片大小和父级盒子一样
（3）给图片使用伪类选择器 :hover
（4）图片放大，transform 属性值，使用 scal() 函数
（5）给父级盒子，添加 overflow : hidden;
（6）使用过渡属性 transition ，优化动画
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=
订阅专栏 解锁全文
扫一扫
4452
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
