转自 http://www.webkaka.com/tutorial/html/2017/072731/
在现在的网页设计中，鼠标移到图片上图片放大的效果常常被用到，这个效果多应用于文章列表里。我一开始以为是用JQuery来实现的，后来才知道原来是用CSS3来实现的。虽然用JQuery也能实现同样的效果，但用CSS3来实现会更加简单和方便。本文将介绍如何用CSS3来实现这个功能。
请把鼠标移到图片上
看到效果是：鼠标移到图片上时，图片会自动放大。
CSS3实现方法如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 200px; height: 138px; border: #000 solid 1px; margin: 50px auto; overflow: hidden; } #div1 img{ cursor: pointer; transition: all 0.6s; } #div1 img:hover{ transform: scale(1.4); } </style> </head> <body> <div id="div1"> <img src="demo.jpg" /> </div> </body> </html>
代码分析：
1、首先知道DIV和IMG的层次关系，IMG是在某DIV里面，图片放大后不应该超出DIV的盒子。
2、设置DIV的 overflow: hidden; 属性，作用是图片变大后超过DIV区域的部分会自动隐藏。
3、设置 transition: all 0.6s; 属性和 transform: scale(1.4); 属性，其中 transition: all 0.6s; 是变化速度，数值越小速度越快，而 transform: scale(1.4); 是变化范围， scale(1.4) 是放大1.4倍的意思。
实例二：图片放大不受限于DIV盒子
如果想图片放大后完全显示，而不是只显示DIV里的区域，那么我们只需把div的 overflow 属性去掉即可，不能设为 auto ，否则div出现滚动条。效果演示如下：
请把鼠标移到图片上
html代码如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 200px; height: 138px; border: #000 solid 0px; margin: 50px auto; /* overflow: hidden; */ } #div1 img{ cursor: pointer; transition: all 0.6s; } #div1 img:hover{ transform: scale(1.4); } </style> </head> <body> <div id="div1"> <img src="demo.jpg" /> </div> </body> </html>
代码分析：
把div的 overflow 属性去掉，其他代码不变。