<!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
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.