Pure CSS Full Window Page Slider with Folder Tab Navigation

Preview:

Description:

A cool pure CSS fullscreen page slider concept that enables the visitor to switch between page slides through hovering over the folder tab navigation.

How to use it:

Add full page tabs into the html document.

<div id="tab0"></div>
<div id="tab1"></div>
<div id="tab2"></div>
<div id="tab3"></div>
<div id="tab4"></div>

Make the tabs full window.

html, body {
  height: 100%;
  margin: 0;
}
.tab, #tab0, #tab1, #tab2, #tab3, #tab4 {
  height: 100%;
  position: absolute;
  box-shadow: 6px 0px 6px rgba(0, 0, 0, 0.3);
  transition: all 0.5s ease;
}

The primary CSS styles.

.tab:hover ~ div, #tab0:hover ~ div, #tab1:hover ~ div, #tab2:hover ~ div, #tab3:hover ~ div, #tab4:hover ~ div { transform: translateX(-80vw); }
#tab0 {
  width: 100vw;
  background: black;
}
#tab1 {
  width: 95vw;
  background: #31152B;
}
#tab1::after {
  content: '';
  position: absolute;
  width: 5vw;
  height: 25vh;
  background: #31152B;
  border-radius: 0 20px 20px 0;
  top: 75%;
  right: -4vw;
}
#tab2 {
  width: 90vw;
  background: #723147;
}
#tab2::after {
  content: '';
  position: absolute;
  width: 5vw;
  height: 25vh;
  background: #723147;
  border-radius: 0 20px 20px 0;
  top: 50%;
  right: -4vw;
}
#tab3 {
  width: 85vw;
  background: #CC4452;
}
#tab3::after {
  content: '';
  position: absolute;
  width: 5vw;
  height: 25vh;
  background: #CC4452;
  border-radius: 0 20px 20px 0;
  top: 25%;
  right: -4vw;
}
#tab4 {
  width: 80vw;
  background: #E6B098;
}
#tab4::after {
  content: '';
  position: absolute;
  width: 5vw;
  height: 25vh;
  background: #E6B098;
  border-radius: 0 20px 20px 0;
  top: 0;
  right: -4vw;
}