www.gusucode.com > 纯JS图片悬停放大特效代码源码程序 > 纯JS图片悬停放大特效代码/纯JS制作炫酷的图片展示特效/纯JS制作炫酷的图片展示特效/style.css

    * {margin:0; padding:0}
body {font:12px/20px "Consolas", "Microsoft YaHei"; color:#333;background:#EFEFEF; overflow:hidden}
ul, li {list-style:none}
.cf {zoom:1}
.cf:after {clear:both; content:"."; display:block; visibility:hidden; height:0}
.wrap {width:980px; margin:0 auto; padding:100px 0 0}

#banner {width:800px; margin:0 auto; position:relative; background:#FFF; height:400px; overflow:hidden}
#banner ul {}
#banner li {float:left; width:190px; height:190px; cursor:pointer;padding:5px}
#banner li img {width:190px; height:190px; position:absolute; z-index:4; left:5px; top:5px}
#banner li span {display:block; width:170px; height:170px; border:10px solid #000; position:absolute; background:#CCC; opacity:0.5; filter:alpha(opacity=50);left:5px; top:5px; z-index:5}
#banner li span:hover {opacity:0.3; filter:alpha(opacity=30); border:10px solid #000; background:#fff;}


.btn_wrap {position:absolute; left:820px; top:150px; height:100px; width:37px}
#goUp {background:url(images/nav.png) no-repeat 4px 4px; width:37px; height:22px; display:block; text-indent:-9999px;position:absolute; left:0; top:0;}
#goUp:hover {background-position:-34px 4px}
#goDown {background:url(images/nav.png) no-repeat 4px -52px; width:37px; height:22px; display:block; text-indent:-9999px;position:absolute; left:0; bottom:0;}
#goDown:hover {background-position:-34px -52px}