<input type="radio" class="radio" name="pages" id="exit" checked />

    <div class="page demo2">

      <input type="radio" class="radio" name="pages" id="page_1" />
      <section class="section-container section-one">
        <label for="exit" class="check-label exit-label">
          X
        </label>
        <label for="page_1" class="page-label check-label">
          <span>Page 1</span>
        </label>
        <header class="section-header">
          <div class="section-content">
            <h1>
              Title of Section One
            </h1>
          </div>
        </header>
        <div class="section-info">
          <div class="section-content">
            <p>
              Bacon ipsum dolor sit amet tenderloin jowl drumstick ribeye strip steak prosciutto jerky kielbasa, pig flank porchetta. Salami tenderloin porchetta tongue t-bone pork chop bacon bresaola cow boudin strip steak jerky tail landjaeger doner. Pancetta turducken biltong porchetta kielbasa. Venison meatloaf rump landjaeger shoulder. T-bone pork chop doner fatback ground round chicken, ham hock drumstick kevin tenderloin salami boudin kielbasa turkey bresaola. Venison pastrami boudin meatball tenderloin jerky strip steak frankfurter bresaola doner landjaeger. Capicola andouille ground round pork loin short loin, tenderloin ham porchetta shoulder pancetta strip steak pork belly sausage.
            </p>
            <p>
              Tri-tip pork loin t-bone chicken tenderloin, porchetta fatback sirloin pork ham pig. Doner kielbasa chuck ground round. Chicken kielbasa tail venison shank salami. Chuck strip steak ham shank spare ribs drumstick ham hock jerky corned beef bresaola fatback sirloin t-bone doner shankle. Short loin ground round prosciutto turkey pork belly pastrami chuck. Hamburger pork belly swine, andouille filet mignon t-bone pork loin ball tip beef ribs beef pig spare ribs turducken shankle jerky.
            </p>
            <p>
              Capicola doner pancetta tenderloin cow leberkas beef turducken ham hock pork loin ball tip. Shoulder biltong pork belly, kielbasa pork ball tip jerky flank. Pastrami andouille doner, leberkas corned beef shoulder pig ham hock pork rump t-bone. Kevin sausage ball tip, tri-tip prosciutto pork shank brisket.
            </p>
          </div>
        </div>
      </section>

      <input type="radio" class="radio" name="pages" id="page_2" />
      <section class="section-container section-two">
        <label for="exit" class="check-label exit-label">
          X
        </label>
        <label for="page_2" class="page-label check-label">
          <span>Page 2</span>
        </label>
        <header class="section-header">
          <div class="section-content">
            <h1>
              Title of Other Section Two
            </h1>
          </div>
        </header>
        <div class="section-info">
          <div class="section-content">
            <p>
              Bacon ipsum dolor sit amet tenderloin jowl drumstick ribeye strip steak prosciutto jerky kielbasa, pig flank porchetta. Salami tenderloin porchetta tongue t-bone pork chop bacon bresaola cow boudin strip steak jerky tail landjaeger doner. Pancetta turducken biltong porchetta kielbasa. Venison meatloaf rump landjaeger shoulder. T-bone pork chop doner fatback ground round chicken, ham hock drumstick kevin tenderloin salami boudin kielbasa turkey bresaola. Venison pastrami boudin meatball tenderloin jerky strip steak frankfurter bresaola doner landjaeger. Capicola andouille ground round pork loin short loin, tenderloin ham porchetta shoulder pancetta strip steak pork belly sausage.
            </p>
            <p>
              Tri-tip pork loin t-bone chicken tenderloin, porchetta fatback sirloin pork ham pig. Doner kielbasa chuck ground round. Chicken kielbasa tail venison shank salami. Chuck strip steak ham shank spare ribs drumstick ham hock jerky corned beef bresaola fatback sirloin t-bone doner shankle. Short loin ground round prosciutto turkey pork belly pastrami chuck. Hamburger pork belly swine, andouille filet mignon t-bone pork loin ball tip beef ribs beef pig spare ribs turducken shankle jerky.
            </p>
            <p>
              Capicola doner pancetta tenderloin cow leberkas beef turducken ham hock pork loin ball tip. Shoulder biltong pork belly, kielbasa pork ball tip jerky flank. Pastrami andouille doner, leberkas corned beef shoulder pig ham hock pork rump t-bone. Kevin sausage ball tip, tri-tip prosciutto pork shank brisket.
            </p>
          </div>
        </div>
      </section>


      <input type="radio" class="radio" name="pages" id="page_3" />
      <section class="section-container section-three">
        <label for="exit" class="check-label exit-label">
          X
        </label>
        <label for="page_3" class="page-label check-label">
          <span>Page 3</span>
        </label>
        <header class="section-header">
          <div class="section-content">
            <h1>
              Title of Section Three
            </h1>
          </div>
        </header>
        <div class="section-info">
          <div class="section-content">
            <p>
              Bacon ipsum dolor sit amet tenderloin jowl drumstick ribeye strip steak prosciutto jerky kielbasa, pig flank porchetta. Salami tenderloin porchetta tongue t-bone pork chop bacon bresaola cow boudin strip steak jerky tail landjaeger doner. Pancetta turducken biltong porchetta kielbasa. Venison meatloaf rump landjaeger shoulder. T-bone pork chop doner fatback ground round chicken, ham hock drumstick kevin tenderloin salami boudin kielbasa turkey bresaola. Venison pastrami boudin meatball tenderloin jerky strip steak frankfurter bresaola doner landjaeger. Capicola andouille ground round pork loin short loin, tenderloin ham porchetta shoulder pancetta strip steak pork belly sausage.
            </p>
            <p>
              Tri-tip pork loin t-bone chicken tenderloin, porchetta fatback sirloin pork ham pig. Doner kielbasa chuck ground round. Chicken kielbasa tail venison shank salami. Chuck strip steak ham shank spare ribs drumstick ham hock jerky corned beef bresaola fatback sirloin t-bone doner shankle. Short loin ground round prosciutto turkey pork belly pastrami chuck. Hamburger pork belly swine, andouille filet mignon t-bone pork loin ball tip beef ribs beef pig spare ribs turducken shankle jerky.
            </p>
            <p>
              Capicola doner pancetta tenderloin cow leberkas beef turducken ham hock pork loin ball tip. Shoulder biltong pork belly, kielbasa pork ball tip jerky flank. Pastrami andouille doner, leberkas corned beef shoulder pig ham hock pork rump t-bone. Kevin sausage ball tip, tri-tip prosciutto pork shank brisket.
            </p>
          </div>
        </div>
      </section>


      <input type="radio" class="radio" name="pages" id="page_4" />
      <section class="section-container section-four">
        <label for="exit" class="check-label exit-label">
          X
        </label>

        <label for="page_4" class="page-label check-label">
          <span>Page 4</span>
        </label>
        <header class="section-header">
          <div class="section-content">
            <h1>
              Title of Section Four
            </h1>
          </div>
        </header>
        <div class="section-info">
          <div class="section-content">
            <p>
              Bacon ipsum dolor sit amet tenderloin jowl drumstick ribeye strip steak prosciutto jerky kielbasa, pig flank porchetta. Salami tenderloin porchetta tongue t-bone pork chop bacon bresaola cow boudin strip steak jerky tail landjaeger doner. Pancetta turducken biltong porchetta kielbasa. Venison meatloaf rump landjaeger shoulder. T-bone pork chop doner fatback ground round chicken, ham hock drumstick kevin tenderloin salami boudin kielbasa turkey bresaola. Venison pastrami boudin meatball tenderloin jerky strip steak frankfurter bresaola doner landjaeger. Capicola andouille ground round pork loin short loin, tenderloin ham porchetta shoulder pancetta strip steak pork belly sausage.
            </p>
            <p>
              Tri-tip pork loin t-bone chicken tenderloin, porchetta fatback sirloin pork ham pig. Doner kielbasa chuck ground round. Chicken kielbasa tail venison shank salami. Chuck strip steak ham shank spare ribs drumstick ham hock jerky corned beef bresaola fatback sirloin t-bone doner shankle. Short loin ground round prosciutto turkey pork belly pastrami chuck. Hamburger pork belly swine, andouille filet mignon t-bone pork loin ball tip beef ribs beef pig spare ribs turducken shankle jerky.
            </p>
            <p>
              Capicola doner pancetta tenderloin cow leberkas beef turducken ham hock pork loin ball tip. Shoulder biltong pork belly, kielbasa pork ball tip jerky flank. Pastrami andouille doner, leberkas corned beef shoulder pig ham hock pork rump t-bone. Kevin sausage ball tip, tri-tip prosciutto pork shank brisket.
            </p>
          </div>
        </div>
      </section>

    </div>
*, *:after, *:before {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

body {
  background: #fafafa;
  font-family: arial narrow, arial;
  font-size: 120%;
  margin: 0; }

body, html, .page {
  height: 100%;
  overflow: hidden; }

:last-child {
  margin-bottom: 0; }

h1, h2, h3, h4,
h5, h6, p, li {
  margin-top: 0; }

article, aside, canvas,
footer, header, main, section {
  display: block; }

.page {
  position: fixed;
  top: 0;
  width: 100%; }

.radio,
.exit-label {
  display: none;
  visibility: hidden; }

.exit-label {
  border: 1px solid #333;
  color: #444;
  display: inline-block;
  padding: 4px 12px;
  text-decoration: none; }

.page-label {
  height: 100%;
  left: 0;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%; }
  .page-label span {
    position: relative;
    top: 50%; }

.check-label {
  cursor: pointer; }
  .check-label:hover, .check-label:active {
    background: rgba(0, 0, 0, 0.3);
    color: #fff; }
  .check-label:focus {
    outline: thin dotted; }

.section-container {
  -moz-transition: 0.4s all;
  -webkit-transition: 0.4s all;
  transition: 0.4s all;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  border: 0px solid;
  height: 50%;
  overflow: hidden;
  position: fixed;
  width: 50%;
  z-index: 1; }
.section-content {
  -moz-transition: 0.66s all;
  -webkit-transition: 0.66s all;
  transition: 0.66s all;
  margin: auto;
  max-width: 800px;
  padding: 20px;
  opacity: 0;
  visibility: hidden; }

:checked + .section-container {
  -moz-transform: translate(0%, 0%);
  -ms-transform: translate(0%, 0%);
  -o-transform: translate(0%, 0%);
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  width: 100%;
  height: 100%;
  z-index: 5;
  overflow: auto; }
  :checked + .section-container .exit-label {
    display: inline-block;
    visibility: visible; }
  :checked + .section-container .page-label {
    display: none; }
  :checked + .section-container .section-content {
    opacity: 1;
    visibility: visible; }

.section-one {
  -moz-transform: translate(0%, 0%);
  -ms-transform: translate(0%, 0%);
  -o-transform: translate(0%, 0%);
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  background: #f5bfb8; }

.section-two {
  -moz-transform: translate(0%, 100%);
  -ms-transform: translate(0%, 100%);
  -o-transform: translate(0%, 100%);
  -webkit-transform: translate(0%, 100%);
  transform: translate(0%, 100%);
  background: #c8f4f2; }

.section-three {
  -moz-transform: translate(100%, 0%);
  -ms-transform: translate(100%, 0%);
  -o-transform: translate(100%, 0%);
  -webkit-transform: translate(100%, 0%);
  transform: translate(100%, 0%);
  background: #c8f4c8; }

.section-four {
  -moz-transform: translate(100%, 100%);
  -ms-transform: translate(100%, 100%);
  -o-transform: translate(100%, 100%);
  -webkit-transform: translate(100%, 100%);
  transform: translate(100%, 100%);
  background: #eef4c8; }

#exit:checked + .page .section-container {
  border: none;
  opacity: 1; }

.page :not(:checked) + .section-container {
  border: 40px solid; }
View Compiled
// Demo by Scott O'Hara. See article: http://www.sitepoint.com/you-can-do-that-with-css/

// inspired by https://tympanus.net/codrops/2013/04/23/fullscreen-layout-with-page-transitions/

// this requires no javascript to function, however it is not keyboard accessible.

// coming soon: JS accessibility solution

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.