<style>
.box{ width: 1000px; height: 450px; margin:0 auto; overflow: hidden;}
.box div{ width: 20%; float: left; transition: all 1s;}
img{ width: 600px;heigt:100%}
.box:hover div{ width: 5%; }
.box div:hover{ width: 600px;}
</style>
</head>
<body>
<div class="box">
<div><img src="http://www.jq22.com/demo/css3sfq20170111/img/1.png" alt=""></div>
<div><img src="http://www.jq22.com/demo/css3sfq20170111/img/2.png" alt=""></div>
<div><img src="http://www.jq22.com/demo/css3sfq20170111/img/3.png" alt=""></div>
<div><img src="http://www.jq22.com/demo/css3sfq20170111/img/4.png" alt=""></div>
<div><img src="http://www.jq22.com/demo/css3sfq20170111/img/5.png" alt=""></div>
</div>
