Experimental #2.1

by lasha

HTML

<input type="checkbox" class="toggleOverlay" id="toggleOverlay1">
<div class="content row-1">
	<label for="toggleOverlay1">Content 1</label>
</div>
<input type="checkbox" class="toggleOverlay" id="toggleOverlay2">
<div class="content row-2">
	<label for="toggleOverlay2">Content 2</label>
</div>
<input type="checkbox" class="toggleOverlay" id="toggleOverlay3">
<div class="content row-3">
	<label for="toggleOverlay3">Content 3</label>
</div>
<input type="checkbox" class="toggleOverlay" id="toggleOverlay4">
<div class="content row-4">
	<label for="toggleOverlay4">Content 4</label>
</div>
<input type="checkbox" class="toggleOverlay" id="toggleOverlay5">
<div class="content row-5">
	<label for="toggleOverlay5">Content 5</label>
</div>

<div class="overlay contentOverlay1">
  <label for="toggleOverlay1">CLOSE</label>
  <input type="checkbox" id="toggleSidebar1" class="toggleSidebar">
  <div class="contentOverlaySidebar">
    <label for="toggleSidebar1"></label>
  </div>
  <div class="contentOverlayContainer">
  	<h3>Content Header 01</h3>
  	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam quam eget lectus varius, in vestibulum felis ornare. Mauris ultrices, turpis quis ultricies porttitor, diam dolor auctor urna, nec aliquam metus ante sed dui. Pellentesque ut imperdiet sem. Quisque dignissim ultrices libero, a tempor mauris tempus vitae. Nam iaculis ultrices molestie. Duis ultrices malesuada turpis. Sed faucibus risus ut odio feugiat interdum. Sed venenatis magna id lectus sagittis suscipit. In hac habitasse platea dictumst. Aliquam erat volutpat. Donec egestas sodales ipsum, ut pretium quam placerat quis. Nullam varius pretium luctus.
  </div>
</div>
<div class="overlay contentOverlay2">
  <label for="toggleOverlay2">CLOSE</label>
  <input type="checkbox" id="toggleSidebar2" class="toggleSidebar">
  <div class="contentOverlaySidebar">
    <label for="toggleSidebar2"></label>
  </div>
  <div class="contentOverlayContainer">
  	<h3>Content Header...

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
body {
  margin: 0;
  background-color: #6d695c;
  background-image:
  repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
  repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
  linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
  linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
  background-size: 70px 120px;
  font-family: 'Roboto Condensed', sans-serif;
}
.toggleOverlay {
  position: fixed;
  top: 0; left: 0;
  clip: rect(0 0 0 0);
}
.toggleOverlay:checked + .content {
  color: #ececec;
  background-color: rgba(200,200,200, 0.15);
  transition-delay: 0s;
}
.toggleOverlay:checked ~ .overlay {
  transition: all 0.1s ease-in;
  transition-delay: 0.3s;
}
.content {
  position: relative;
  padding: 10px 20px;
  font-size: 26px;
  text-align: center;
  transition: all 0.1s ease-in;
  transition-delay: 0.3s;
}
.overlay {
  /* display: none; */
  visibility: hidden;
  opacity: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  /* top: 0; */
  top: -100%;
  left: 0;
  background-color: rgba(255,255,255, .7);
  z-index: 10;
  transition: all 0.1s ease-in;
  /* transition-delay: 0s; */
  overflow-y: auto;
  overflow-x: hidden;
}
.overlay label {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 1;
}
.overlay .contentOverlaySidebar {
  position: absolute;
  top: 0; left: 0;
  width: 30px;
  height: 100%;
  background-color: #A9A9A9;
  transition: all 0.25s ease-in;
}
.overlay .contentOverlaySidebar:hover {
  width: 60px;
}
/* .overlay .contentOverlaySidebar:hover ~ .contentOverlayContainer {
  left: 100px;
} */
.overlay .contentOverlaySidebar label:after {
  content: "OPEN";
}
.overlay .toggleSidebar:checked +...