<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background-image:radial-gradient(white,black);
}
ul{
width:550px;
height:300px;
overflow:hidden;
cursor:pointer;
}
li{
float:left;
width:110px;
height:300px;
list-style:none;
transition:all1s;
position:relative;
}
li::after{
content:'Night';
position:absolute;
bottom:0;
left:0;
width:450px;
height:30px;
line-height:30px;
font-size:16px;
text-align:center;
color:rgb(243,230,230);
background-color:rgba(48,46,46,.5);
}
img{
height:100%;
width:450px;
}
ul:hoverli{
width:25px;
}
ulli:hover{
width:450px;
}
</style>
</head>
<body>
<ul>
<li><imgsrc="1.jpg"alt=""><div>Night</div></li>
<li><imgsrc="2.jpg"alt=""><div>Night</div></li>
<li><imgsrc="4.jpg"alt=""><div>Night</div></li>
<li><imgsrc="3.jpg"alt=""><div>Night</div></li>
<li><imgsrc="5.jpg"alt=""><div>Night</div></li>
</ul>
</body>
</html>
|