How to create splash tabs in blogger post in 5 minutes

Back>

You can create an impressive splash screen in blogger post, the dynamic impression is realized with css, no javascript is involved.

Here is the example:

Example

<link href='https://fonts.googleapis.com/css?family=Josefin+Slab:400' rel='stylesheet' type='text/css'>
<stage>
<header>
  <h1>splash</h1>
  <input type="radio" id="uno" value="1" name="tractor" checked='checked' />
      <label for="uno">1</label>
  <input type="radio" id="dos" value="2" name="tractor" />
      <label for="dos">2</label>
  <input type="radio" id="tres" value="3" name="tractor" />
      <label for="tres">3</label>
  <input type="radio" id="cuatro" value="4" name="tractor" />
      <label for="cuatro">4</label>
    <section class='visor'>
           <article class='unidad uno'>
              <div>
                <h2>Splash 1</h2>
                <p>Una, dole, tele catole, quile, quilete</p>
              </div>
           </article><!--
        --><article class='unidad dos'>
              <div>
                <h2>Splash 2</h2>
                <p>Estaba la reina sentadita en su sillete</p>
              </div>
           </article><!--
        --><article class='unidad tres'>
              <div>
                <h2>Splash 3</h2>
                <p>Vino Gil, rompió el barril</p>
              </div>
           </article><!--
        --><article class='unidad cuatro'>
              <div>
                <h2>Splash 4</h2>
                <p>barril barrilón. Guardia y Ladrón</p>
              </div>
           </article>
    </section>
  </header>
</stage>
<style>
* {margin: 0; padding: 0; border: 0 none;}
*, *:after, *:before {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
stage html, stage body {
    background: #fff;
    font-family: 'Josefin Slab',sans-serif;
    font-weight: 400;
    height: 100%;
    width: auto;
  }
stage body {
    margin: 0 auto;
    max-width: 1100px;
    padding: 1rem 0 0;
    width: 90%;;
}
stage header {
    max-height: 90%;
    overflow: hidden;
    padding-bottom: 33%;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 1;
}
stage h1 {
    color: #BEF202;
    display: inline-block;
    font-size: 6rem;
    text-align: center;
    position: absolute;
    display: block;
    bottom: 1rem;
    width: 100%;
    z-index: 2;
    line-height: 6rem;
    text-shadow: 0 0 1px #000;
    letter-spacing: 1px;
}
stage h1:after, stage h1:before {
    border-bottom: 3px double #FFF;
    border-top: 3px double #FFF;
    content: "";
    display: block;
    height: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 2.7rem;
    z-index: -1;
opacity: .6;
}
stage h1:after {
    top: 4.7rem;
}
stage .visor {
    height: 100%;
    width: 400%;
    position: absolute;
    top: 0;
    transition: .5s linear; 
}
stage article {
    display: inline-block;
    width: 25%;
    height: 100%;
    position: relative;
    overflow: hidden;   
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}
stage article > div {
    max-width: 40%;
    background: linear-gradient(to left, rgba(0,0,0, .7) 0%, rgba(0,0,0, .3) 75%, rgba(0, 0, 0, 0));
    position: absolute;
    right:0;
    top: 0;
    bottom: 0;
    padding: 2rem 0 0 2rem;
    font-size: 2rem;
    color: #fff;
  text-shadow: 0 0 1px #000
}
stage .uno {background-image: url(http://farm9.staticflickr.com/91/233031265_619c73665a_z.jpg)}
stage .dos {background-image: url(http://farm9.staticflickr.com/3313/3276943287_bccc13aa11.jpg)}
stage .tres {background-image: url(http://farm9.staticflickr.com/7159/6799469929_27a58ed9e0_z.jpg)}
stage .cuatro {background-image: url(http://farm9.staticflickr.com/4084/5219952596_76d922c2bd_z.jpg)}

stage input[type=radio] {
  z-index: 10;
  position: relative;
  display: inline-block;
  visibility: hidden;
}
stage input + label {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5);
    border-radius: 50% 50% 50% 50%;
    cursor: pointer;
    display: inline-block;
    font-size: 2rem;
    color: #aaa;
    line-height: 2rem;
    margin-top: 0.5rem;
    overflow: hidden;
    position: relative;
    width: 2rem;
    z-index: 10;
}
stage input[name='tractor']:checked + label {
  background: #BEF202;
  box-shadow: 0 0 5px rgba(0,0,0,.5);
  color: #444;
}

stage input[id='uno']:checked ~ .visor {left: 0;}
stage input[id='dos']:checked ~ .visor {left: -100%;}
stage input[id='tres']:checked ~ .visor {left: -200%;}
stage input[id='cuatro']:checked ~ .visor {left: -300%;}
</style>