<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{margin: 0px; padding: 0px;}
ul{
width:1080px;
height:632px;
overflow: hidden;
}
ul li{
width: 70px;
height: 632px;
float: left;
list-style: none;
transition:width 2s;
}
ul li:last-child{
width: 800px;
}
ul li:hover{
width:800px ;
}
ul li:hover ~ li{
width:70px;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">
<img src="images/num-01.jpg">
</a>
</li>
<li >
<a href="#">
<img src="images/num-02.jpg">
</a>
</li>
<li>
<a href="#">
<img src="images/num-03.jpg">
</a>
</li>
<li >
<a href="#">
<img src="images/num-04.jpg">
</a>
</li>
<li>
<a href="#">
<img src="images/num-05.jpg">
</a>
</li>
</ul>
</body>
</html>
