<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{margin: 0px; padding: 0px;}
ul{
1080px;
height:632px;
overflow: hidden;
}
ul li{
70px;
height: 632px;
float: left;
list-style: none;
transition:width 2s;
}
ul li:last-child{
800px;
}
ul li:hover{
800px ;
}
ul li:hover ~ li{
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>