纯css实现的鼠标经过放大效果

这是一个纯的css的鼠标经过图片的放大效果，是一张图片完成的，要是前台显示一张，鼠标经过的时候再调用一张大的就更好了。是可以实现的。看来css是越来月强大了啊。

 

css部分

<style>
.zhengenru{ margin:0;padding:0;list-style:none;padding-bottom:300px; /*padding给图片撑开空间*/}
.zhengenru01{display:inline;}
.zhengenru01 a{position:relative;}
.zhengenru01 a:hover{position:relative;border:none;z-index:1000;}/*此处要有border:none属性，否则IE6下面无法显示出来，是IE6伪类的BUG*/
.zhengenru01 a img{width:100px;height:100px;border:none;position:absolute;}/*使用绝对定位让图片固定，从而脱离页面流*/
.zhengenru01 a:hover img{position: absolute;left:0;top:0;width:240px;height:240px;padding:5px;background:#fff;border:2px solid #000;z-index:1000;} /*注意这里的z-index显示设置，否则会有重叠*/

</style>

 

html部分

<div class="zhengenru"><div class="zhengenru01"><a href="#"><img src="csse5ae9ee78eb0e59bbee78987e7bca9e694be3_files/01.jpg" alt=""></a></div></div>