css 鼠标划过图片放大实现

网页图片放大悬停效果

最新推荐文章于 2025-10-21 15:47:26 发布

原创最新推荐文章于 2025-10-21 15:47:26 发布 · 1w 阅读

39 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

css 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种在网页上实现图片放大悬停效果的方法，通过CSS的transition和transform属性，使得图片在鼠标悬停时平滑放大。文章详细解释了代码原理，包括如何限制图片放大后的显示范围以及如何确保跨浏览器兼容性。

荆轲刺秦王

有时候我们在静态网页中需要加一些动作，或者特效使我们的网页效果看起来更生动

我们经常会看到有些网站的图片是这样的效果：

<style>

.img_box{width:200px;height:200px;overflow: hidden;}
.img{width:100%;transition: all 0.6s;}
.img:hover{transform: scale(1.2);}

</style>

<div class="img_box"><img src="https://img-blog.csdnimg.cn/20181105090020709.jpg" class="img"></div>

代码分析：
1、首先知道 div 和 img 的层次关系，img 是在 div 里面，图片放大后不应该超出 div 的盒子。
2、设置 div 的 overflow: hidden; 属性，作用是图片变大后超过 div 区域的部分会自动隐藏。
3、设置 transition: all 0.6s; 属性和 transform: scale(1.2); 属性，其中 transition: all 0.6s; 是变化速度，数值越小速度越快，而 transform: scale(1.2); 是变化范围， scale(1.2) 是放大1.2倍的意思。

扩展一：如果我们希望图片不受限于 div 里面只需要把 div 的overflow: hidden; 属性去掉就可以了。

扩展二：考虑到不同浏览器的兼容性，可以将 img 的属性改为：

-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s;

-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-o-transform: scale(1.2);-ms-transform: scale(1.2);