操作方法
准备好需要用到的图标。
新建html文档。
书写hmtl代码。 <div class="boxBor"></div> <div class="a"> <div class="box"><a href=""></a><img width="100" height="100" src="images/girl.jpg"/></div> <div class="box"><a href=""></a><img width="100" height="100" src="images/girl2.jpg"/></div> <div class="box"><a href=""></a><img width="100" height="100" src="images/girl3.jpg"/></div> <div class="box"><a href=""></a><img width="100" height="100" src="images/girl4.jpg"/></div> <div class="box"><a href=""></a><img width="100" height="100" src="images/girl5.jpg"/></div> <div class="box"><a href=""></a><img width="100" height="100" src="images/girl.jpg"/></div> <div class="box"><a href=""></a><img width="100" height="100" src="images/girl2.jpg"/></div> <div class="box"><a href=""></a><img width="100" height="100" src="images/girl3.jpg"/></div> <div class="box"><a href=""></a><img width="100" height="100" src="images/girl4.jpg"/></div> <div class="box"><a href=""></a><img width="100" height="100" src="images/girl5.jpg"/></div> <div class="box"><a href=""></a><img width="100" height="100" src="images/girl.jpg"/></div> <div class="box"><a href=""></a><img width="100" height="100" src="images/girl2.jpg"/></div> </div>
书写css代码。 * { margin: 0; padding: 0; } a, img { border: 0; } ul, li { list-style: none; } body { background: #eee; } .lanrenzhijia { width: 490px; margin: 30px auto; } .box { float: left; width: 100px; height: 100px; border: 1px solid white; background: #EEE; margin: 10px; position: relative; display: inline; } .box a { display: block; width: 100px; height: 100px; overflow: hidden; position: absolute; left: 0; top: 0; z-index: 9; } .boxBor { position: absolute; left: 0; top: 0; display: none; border: 1px solid white; z-index: 4; background: #fff; background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.77)); background: -w ebkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.77)); background: -o-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.77)); background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.77)); }
代码整体结构。
查看效果。