<div class="wrapper">
  <div class="frame"></div>
  <input checked='' class='tab1' id="tabA" name='thumbnail' type='radio' /><label for="tabA" class="a">w3c</label>
  <input class='tab2' id="tabB" name='thumbnail' type='radio' /><label for="tabB" class="b">html</label>
  <input class='tab3' id="tabC" name='thumbnail' type='radio' /><label for="tabC" class="c">css</label>
  <input class='tab4' id="tabD" name='thumbnail' type='radio' /><label for="tabD" class="d">js</label>
  <ul>
    <li>
      <h3>History of the Web</h3>
      <p>Tim Berners-Lee invented the World Wide Web in 1989, about 20 years after the first connection was established over what is today known as the Internet. At the time, Tim was a software engineer at CERN, the large particle physics laboratory near Geneva. Many scientists participated in experiments at CERN for extended periods of time, then returned to their laboratories around the world. These scientists were eager to exchange data and results, but had difficulties doing so. Tim understood the unrealized potential of millions of computers connected together through the Internet.
      </p>  
    </li>
    <li>
      <h3>HTML</h3>
      <p>HTML —which is short for HyperText Markup Language— is the official language of the World Wide Web and was first conceived in 1990. HTML is a product of SGML (Standard Generalized Markup Language) which is a complex, technical specification describing markup languages, especially those used in electronic document exchange, document management, and document publishing. HTML was originally created to allow those who were not specialized in SGML to publish and exchange scientific and other technical documents. HTML especially facilitated this exchange.
      </p>  
    </li>
    <li>
      <h3>CSS</h3>
      <p>The saga of CSS starts in 1994. One of the authors of this book works at CERN - the cradle of the Web - and the Web is starting to be used as a platform for electronic publishing. One crucial part of a publishing platform is missing, however: there is no way to style documents. For example, there is no way to describe a newspaper-like layout in a Web page. Having worked on personalized newspaper presentations at the MIT Media Laboratory, Håkon saw the need for a style sheet language for the Web. Style sheets in browsers were not an entirely new idea.</p>
    </li>
    <li>
      <h3>JavaScript</h3>
      <p>JavaScript was originally developed in Netscape, by Brendan Eich. Battling with Microsoft over the Internet, Netscape considered their client-server solution as a distributed OS, running a portable version of Sun Microsystems' Java. Because Java was a competitor of C++ and aimed at professional programmers, Netscape also wanted a lightweight interpreted language that would complement Java by appealing to nonprofessional programmers, like Microsoft's VB. Developed under the name Mocha, LiveScript was the official name for the language.
      </p>
    </li>  
  </ul>
</div>
<h4>follow me 
    <a href="https://twitter.com/samarkandiy" target="_blank">@samarkandiy</a>
</h4>

html{
  background: #333;
  width: 500px;
  height: 100%;
  margin: 0 auto;
  padding: 10px;
  font-family: "Verdana";
  font-size: 14px;
}
.wrapper{
  background: #fff;
  width: 500px;
  height: 290px;
  border: solid 1px #999;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 20px -10px #000;
  transition: transform .1s linear;
}

.frame{
  background: transparent;
  width: 490px;
  height: 240px;
  border-top: solid 45px #ccc;
  border-right: solid 5px #ccc;
  border-bottom: solid 5px #ccc;
  border-left: solid 5px #ccc;
  position: absolute;
  z-index: 1;
  box-shadow: 0 0 10px #222 inset;
}

[type='radio'] {
  position: absolute;
  opacity: 0;
  left: 0;
}
label{
  background: linear-gradient(#555, #000);
  color: #fff;
  font-family: 'Arial';
  font-weight: bold;
  text-shadow: 2px 2px 2px #000;
  width: 99px;
  height: 15px;
  text-transform: uppercase;
  position: relative;
  margin: 5px 0 5px 5px;
  padding: 10px;
  float: left;
  display: inline;
  top: 0;
  border-radius: 5px 5px 0 0;
  z-index: 99999;
  cursor: pointer;
}

label:hover{
  background: linear-gradient(#000, #222);  
}

.tab1:checked ~ .a{
  background: linear-gradient(#000, #555);
}

.tab2:checked ~ .b{
  background: linear-gradient(#000, #555);
}

.tab3:checked ~ .c{
  background: linear-gradient(#000, #555);
}

.tab4:checked ~ .d{
  background: linear-gradient(#000, #555);
}
ul{
  margin-left: -20px;
  transition: .3s ease-out;
}
ul li{
  background: #fff;
  color: #111;
  width: 460px;
  height: 250px;
  display: inline;
  float: left;
  bottom: 0;
  z-index: -1;
}

ul li p{
  text-align: justify;
}

.tab1:checked ~ ul{
  transform: translateY(0);
}

.tab2:checked ~ ul{
  transform: translateY(-250px);
}

.tab3:checked ~ ul{
  transform: translateY(-500px);
}

.tab4:checked ~ ul{
  transform: translateY(-750px);
}

h4{
  color: #fff;
  text-align: right;
  text-shadow: 2px 2px 3px #111;
  position: absolute;
  bottom: 20px;
  right: 15px;
}

h4 a{
  color: #fff;
  text-decoration: none;
}

::selection{
  background: #222;
  color: #fff;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.