使用过渡效果制作小案例

过渡效果小案例思路：section设宽高，div设宽高。加浮动。最右边的图超出section，加overflow。

鼠标滑动效果：所有div先同时变小，然后单击某一个div时图片放大

<section>
		<div><img src="images/img1.jpg" alt=""></div>
		<div><img src="images/img2.jpg" alt=""></div>
		<div><img src="images/img3.jpg" alt=""></div>
		<div><img src="images/img4.jpg" alt=""></div>
		<div><img src="images/img5.jpg" alt=""></div>
</section>

	section{
			width: 800px;
			height: 320px;
			background: pink;
			margin:0 auto;
			overflow: hidden;
		}
		div{
			width: 160px;
			height: 320px;
			float: left;
		}
		section:hover div{
			width: 40px;
			transition:1s;
		}
		section div:hover{
			width: 640px;
		}

做到最后，出现个小bug：偶尔有图会掉下来。这是因为section的宽度不够了，包不住所有浮动的图片。解决方案：在所有div外面再包一个article标签，只需设置宽，宽度要比section大，作为容器

最后的呈现的效果图如下：