网页Css知识之百叶窗相册

先上代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	
	<style type="text/css">
		*{
			/*border: solid 1px black;*/
			padding: 0;
			margin: 0;
		}
		.container{
			width: 805px;
			height: 320px;
			list-style: none;
			margin: 100px auto;
			/*margin上下100px,左右自动*/
			overflow: hidden;
			/*当图片溢出时,自动隐藏*/
			box-shadow: 1px 1px 6px 1px #444;
			/*图片下面的阴影,前两个为XY坐标，第三个为虚化值
			 * 第五个为颜色，相当于一个图形下面的色块*/
			/*第四个为向外扩散多少个像素，扩散距离*/
			
		}
		
		.container li{
			width: 160px;
			height: 320px;
			float: left;
			
			border-left: solid 1px white;
			box-shadow: -3px 0px 20px #222;
			/*只能看到左边的阴影,所以只改左边的参数*/
			position: relative;
			transition: all 1s;
			/*为了使鼠标本元素（图片）离开时有特效显示*/
		}
		
		.container li .footer{
			/*对于图片下面设计的一层黑色半透明遮罩的设计*/
			width: 100%;
			/*为了让其宽度与父元素一样*/
			height: 60px;
			background: rgba(0,0,0,0.5);
			/*rgba为设置背景颜色,与rgb用法不同*/
			position: absolute;
			/*让色块覆盖在图片之上,且图片必须设置为相对定位*/
			left: 0; bottom: 0;
			
			color: white;
			font-weight: bold;
			line-height: 60px;
			/*行高,为了设置上下居中*/
			padding-left: 30px;
			/*为了让字体在左边*/
			transition: all 0.9s;
			/*设置半透明遮罩的变化时间*/
		}
		
		.container:hover li{
			width: 40px;
			/*transition: all 1s;*/
			/*为了使鼠标离开时有特效显示,
			 * 将此句话移动到上面元素属性内*/
		}
		
		.container li:hover{
			width:640px;
			/*transition: all 1s;*/
			/*为了使鼠标离开时有特效显示,
			 * 将此句话移动到上面元素属性内*/
		}
		
		
		
	</style>
	
	<body>
		<ul class="container">
			<li>
				<img src="img/img1.jpg" />
				<div class="footer">《Kung Fu Panda》</div>
			</li>
			<li>
				<img src="img/img2.jpg" />
				<div class="footer">《Toy Story》</div>
			</li>
			<li>
				<img src="img/img3.jpg" />
				<div class="footer">《Wall E》</div>
			</li>
			<li>
				<img src="img/img4.jpg" />
				<div class="footer">《Flying house》</div>
			</li>
			<li>
				<img src="img/img5.jpg" />
				<div class="footer">《Cars》</div>
			</li>
		</ul>
	</body>
</html>
下面是具体的效果展示