<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="slider">
<item class="item-1"><span>Summer</span></item>
<item class="item-2"><span>Winter</span></item>
<item class="item-3"><span>Fall</span></item>
<item class="item-4"><span>Spring</span></item>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
color: #fff;
}
.slider {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
}
item {
height: 100vh;
display: flex;
justify-content: center;
-ms-align-items: center;
align-items: center;
flex-basis: 25%;
background-color: #aeaeae;
border: 1px solid #000;
transition: all 0.2s;
&:hover {
flex-basis: 100%;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.