<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>