主要用到css3中的transition和布局知识。代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="">
<title>标题</title>
</head>
<style type="text/css">
*{margin: 0;padding: 0;}
body{background: url(images/bg.jpg);}
#demo{
width: 906px;
height: 486px;
background: rgba(0,0,0,0.4);
margin: 80px auto;
border:5px solid #fff;
}
ul,li{list-style: none;}
#demo ul li{
float: left;
width: 300px;
height: 160px;
background: #00cc00;
border:1px solid #fff;
position: relative;
}
#demo ul li img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
-webkit-transition:all 2s linear;
-moz-transition:all 2s linear;
-ms-transition:all 2s linear;
-o-transition:all 2s linear;
transition:all 2s linear;
}
#demo ul li img.default{opacity: 1;}
#demo ul li a{
position: absolute;
top:0;
left: 0;
background: rgba(0,0,0,0.5);
text-align: center;
width: 100%;
line-height: 160px;
font-size: 22px;
color: #fff;
text-decoration: none;
opacity: 0.5;
}
#demo ul li:hover a{opacity: 1;}
#demo ul li:hover .toBottom{top:162px;opacity: 1;z-index: 999;}
#demo ul li:hover .toLeft{left:-302px;opacity: 1;z-index: 999;}
#demo ul li:hover .toTop{top:-162px;opacity: 1;z-index: 999;}
#demo ul li:hover .toRight{left:302px;opacity: 1;z-index: 999;}
</style>
<body>
<div id="demo">
<ul>
<li>
<img src="data:images/img1.png" class="default" />
<a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a>
<img src="data:images/seob.jpg" class="toBottom">
<img src="data:images/seor.jpg" class="toRight">
</li>
<li>
<img src="data:images/img2.png" class="default" />
<a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a>
<img src="data:images/taob.jpg" class="toBottom">
<img src="data:images/taor.jpg" class="toRight">
<img src="data:images/taol.jpg" class="toLeft">
</li>
<li>
<img src="data:images/img3.png" class="default" />
<a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a>
<img src="data:images/syb.jpg" class="toBottom">
<img src="data:images/syl.jpg" class="toLeft">
</li>
<li>
<img src="data:images/img4.png" class="default" />
<a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a>
<img src="data:images/jb.jpg" class="toBottom">
<img src="data:images/jr.jpg" class="toRight">
<img src="data:images/jt.jpg" class="toTop">
</li>
<li>
<img src="data:images/img5.png" class="default" />
<a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a>
<img src="data:images/wr.jpg" class="toRight">
<img src="data:images/wt.jpg" class="toTop">
<img src="data:images/wl.jpg" class="toLeft">
<img src="data:images/wb.jpg" class="toBottom">
</li>
<li>
<img src="data:images/img6.png" class="default" />
<a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a>
<img src="data:images/pb.jpg" class="toBottom">
<img src="data:images/pl.jpg" class="toLeft">
<img src="data:images/pt.jpg" class="toTop">
</li>
<li>
<img src="data:images/img7.png" class="default" />
<a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a>
<img src="data:images/ynr.jpg" class="toRight">
<img src="data:images/ynt.jpg" class="toTop">
</li>
<li>
<img src="data:images/img8.png" class="default" />
<a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a>
<img src="data:images/snr.jpg" class="toRight">
<img src="data:images/snt.jpg" class="toTop">
<img src="data:images/snl.jpg" class="toLeft">
</li>
<li>
<img src="data:images/img9.png" class="default" />
<a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a>
<img src="data:images/wll.jpg" class="toLeft">
<img src="data:images/wlt.jpg" class="toTop">
</li>
</ul>
</div>
</body>
</html>