CSS3风琴折叠图片效果

HTML部分

<style type="text/css">
		body{
			background: #eee;
		}
		.tupian{
			float: right;
			width: 1200px;
			height: 180px;
			padding: 100px 0;
		}
		p{
			float: right;	
			width: 50px;
			height: 180px;
			overflow: hidden;
			transition: 2s ease;
		}
		p:hover{
			width: 300px;
		}
		img{
			width: 300px;
			height: 180px;
		}
	</style>

CCS部分

<div class="tupian">
		<p><img src="images/01.jpg" alt=""></p>
		<p><img src="images/02.jpg" alt=""></p>
		<p><img src="images/03.jpg" alt=""></p>
		<p><img src="images/04.jpg" alt=""></p>
		<p><img src="images/05.jpg" alt=""></p>
		<p><img src="images/06.jpg" alt=""></p>
		<p><img src="images/07.jpg" alt=""></p>
		<p><img src="images/08.jpg" alt=""></p>
	</div>