抖音网课
参考：https://www.jb51.net/css/593713.html
图片：https://www.3dmgame.com/games/yuanshen/qrwtj_535/
hover 修改背景不会。
<html>
<title>原神</title>
<head>
<style>
ul {
width: 1000px;
height: 500px;
margin: 100px auto;
padding-inline-start: 0;
}
ul:hover li {
width: 50px;
}
li {
width: 200px;
height: 500px;
list-style: none;
float: left;
overflow: hidden;
cursor: pointer;
transition: 0.5s;
}
ul li:hover {
width: 800px;
}
li img {
height: 500px;
}
</style>
</head>
<body>
<ul>
<li><img src="https://img.3dmgame.com/uploads/images/news/20200119/1579416175_275268.jpg"></li>
<li><img src="https://img.3dmgame.com/uploads/images/news/20200119/1579417496_739273.jpg"></li>
<li><img src="https://img.3dmgame.com/uploads/images/news/20200119/1579416877_919906.jpg"></li>
<li><img src="https://img.3dmgame.com/uploads/images/news/20200119/1579418169_434972.jpg"></li>
<li><img src="https://img.3dmgame.com/uploads/images/news/20200915/1600137306_223576.jpg"></li>
</ul>
</body>
</html>