CodePen Embed - Pure CSS Tab Navigation

<link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>

<h2 class="title-text">Click on either tab!</h2>

<div class="sidebar-tabs-menu-1">
  <label for="sidebar-tabs-menu-1-tab-1" class="tab">
    
    <input type="radio" name="sidebar-tabs-menu-1-tab" id="sidebar-tabs-menu-1-tab-1" value="sidebar-tabs-menu-1-recent" class="display-none" checked>
    
    <div class="title">Recent</div>
    <div class="reveal">
      
      <div class="lay-frame">
        <div class="underlay">
          <h2>Hover me!</h2>
        </div>
        <div class="overlay">
          <div class="readMore">
            <a href="#">
              Read more
            </a>
            <div class="arrow">
              <div class="arrow-mask"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="text-frame">
        <div><h2><a href="#">Lorem ipsum dolor sit amet, consectetur.</a></h2></div>
        <div><p>Author / June 19, 2014</p></div>
        <div><div class="border-bottom"></div></div>
      </div>
      
      <div class="lay-frame">
        <div class="underlay">
          <h2>Hover me!</h2>
        </div>
        <div class="overlay">
          <div class="readMore">
            <a href="#">
              Read more
            </a>
            <div class="arrow">
              <div class="arrow-mask"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="text-frame">
        <div><h2><a href="#">Lorem ipsum dolor sit amet, consectetur.</a></h2></div>
        <div><p>Author / June 19, 2014</p></div>
        <div><div class="border-bottom"></div></div>
      </div>
      
    </div>
  </label>
  
  <label for="sidebar-tabs-menu-1-tab-2" class="tab">
    
    <input type="radio" name="sidebar-tabs-menu-1-tab" id="sidebar-tabs-menu-1-tab-2" value="sidebar-tabs-menu-1-popular" class="display-none">
    
    <div class="title not-first">Popular</div>
    <div class="reveal">
      
      <div class="lay-frame">
        <div class="underlay">
          <h2>Hover me!</h2>
        </div>
        <div class="overlay">
          <div class="readMore">
            <a href="#">
              Read more
            </a>
            <div class="arrow">
              <div class="arrow-mask"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="text-frame">
        <div><h2><a href="#">Lorem ipsum dolor sit amet, consectetur.</a></h2></div>
        <div><p>Author / June 19, 2014</p></div>
        <div><div class="border-bottom"></div></div>
      </div>
      
      <div class="lay-frame">
        <div class="underlay">
          <h2>Hover me!</h2>
        </div>
        <div class="overlay">
          <div class="readMore">
            <a href="#">
              Read more
            </a>
            <div class="arrow">
              <div class="arrow-mask"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="text-frame">
        <div><h2><a href="#">Lorem ipsum dolor sit amet, consectetur.</a></h2></div>
        <div><p>Author / June 19, 2014</p></div>
        <div><div class="border-bottom"></div></div>
      </div>
      
    </div>
  </label>
</div>

/* GENERAL RULES (REQUIRED) */
* {box-sizing:border-box;transition:all 0.3s;-webkit-transition:all 0.3s;color:#1d1f20;font-family: 'Roboto', sans-serif;}
.display-none {display:none;}

/* GENERAL RULES (OPTIONAL) */
body {margin:0;background-color:#1d1f20;}
h2 {font-weight:300;}
.title-text {text-align:center;font-size:40px;color:#EEE;}
.sidebar-tabs-menu-1 {position:relative;margin:40px auto;width:275px;}

/* TAB RULES */
.sidebar-tabs-menu-1 .tab {position:relative;float:left;margin-bottom:-300%;}
.sidebar-tabs-menu-1 .tab .title {cursor:pointer;position:absolute;padding:18px 10px;background-color:#EEE;border-bottom:3px solid #E0346A;width:50%;z-index:1;text-align:center;}
.sidebar-tabs-menu-1 .tab .title.not-first {right:0;}

/* CHANGE TABS */
.sidebar-tabs-menu-1 input[type="radio"]:checked ~ .title {background-color:#E0346A;color:#EEE;}
.sidebar-tabs-menu-1 input[type="radio"]:checked ~ .reveal .lay-frame div {transform:translateX(0px);-webkit-transform:translateX(0px);opacity:1;z-index:1;}
.sidebar-tabs-menu-1 input[type="radio"]:checked ~  .reveal .text-frame div {transform:translateX(0px);-webkit-transform:translateX(0px);opacity:1;z-index:1;}

/* REVEALED RULES */
.sidebar-tabs-menu-1 .reveal {margin:58px 0 0 0;overflow:hidden;}

/* LAY RULES */
.sidebar-tabs-menu-1 .reveal .lay-frame {position:relative;float:left;cursor:pointer;overflow:hidden;margin-top:30px;margin-bottom:20px;width:100%;height:160px;}
.sidebar-tabs-menu-1 .reveal .lay-frame div {opacity:0;z-index:0;transform:translateX(200%);-webkit-transform:translateX(200%);}
.sidebar-tabs-menu-1 .reveal .underlay {position:relative;float:left;width:100%;height:100%;box-shadow:0 0 160px #444 inset;}
.sidebar-tabs-menu-1 .reveal .underlay h2 {text-align:center;color:#EEE;line-height:62px;}
.sidebar-tabs-menu-1 .reveal .overlay {position:relative;width:100%;height:100%;color:#EEE;background-color:rgba(0,0,0,0.35);z-index:1;top:100%;opacity:0;}

/* LAY HOVER RULES */
.sidebar-tabs-menu-1 .reveal .underlay:hover + .overlay {opacity:1;top:0;}
.sidebar-tabs-menu-1 .reveal .overlay:hover {opacity:1;top:0;}

/* READ MORE RULES */
.sidebar-tabs-menu-1 .reveal .overlay .readMore {position: absolute;bottom: 0;right: 0;padding: 14px 10px 15px;font-size: 22px;width: 100%;border-top: 1px solid #999;background-color: rgba(0,0,0,0.6);color: #fff;font-weight: 300;}
.sidebar-tabs-menu-1 .reveal .overlay .readMore > a {float: left;width: 100%;color:#EEE;text-decoration:none;}
.sidebar-tabs-menu-1 .reveal .overlay .readMore:hover {background-color:rgba(224, 52, 106,0.7);}
.sidebar-tabs-menu-1 .reveal .overlay .readMore:hover .arrow {cursor: pointer;border-color: transparent;border-width: 0;}
.sidebar-tabs-menu-1 .reveal .overlay .readMore:hover .arrow .arrow-mask {left: -15px;top: -29px;}

/* ARROW RULES */
.sidebar-tabs-menu-1 .reveal .overlay .arrow {border: 4px solid #DADADA;border-radius: 100%;width: 40px;height: 40px;position: absolute;right: 20px;bottom:9px;}
.sidebar-tabs-menu-1 .reveal .overlay .arrow .arrow-mask {position: relative;top: -33px;left: -32px;border: 21px solid transparent;}
.sidebar-tabs-menu-1 .reveal .overlay .arrow .arrow-mask:before {content: '';position: relative;float: left;top: 16px;left: 28px;width: 4px;height: 16px;background-color: #DADADA;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);}
.sidebar-tabs-menu-1 .reveal .overlay .arrow .arrow-mask:after {content: '';position: relative;float: left;top: 9px;left: 28px;width: 4px;height: 16px;background-color: #DADADA;transform: rotate(45deg);-webkit-transform: rotate(45deg);}

/* UNDERTEXT RULES */
.sidebar-tabs-menu-1 .reveal .text-frame div {position:relative;float:left;width:100%;opacity:0;z-index:0;transform:translateX(-300%);-webkit-transform:translateX(-300%);}
.sidebar-tabs-menu-1 .reveal .text-frame h2 {cursor:pointer;margin-top:-8px;margin-bottom:-8px;line-height:0.9;}
.sidebar-tabs-menu-1 .reveal .text-frame h2 a {font-size:16px;font-weight:300;text-transform:uppercase;color:#E0346A;}
.sidebar-tabs-menu-1 .reveal .text-frame h2 a:hover {color:rgba(224, 52, 106,0.75);}
.sidebar-tabs-menu-1 .reveal .text-frame p {cursor:auto;color:#EEE;}
.sidebar-tabs-menu-1 .reveal .text-frame .border-bottom {border-bottom:1px solid #9a9a9a;}

/**
*
* Go to https://codepen.io/zephyr/pen/agHqz
*
* If you want to see it working with jQuery and fully functional
*
*/

This Pen is owned by Izzy Skye on CodePen.

See more by @chrysokitty on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js