<section class="tabs">
               <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
              <label for="tab-1" class="tab-label-1">About</label>
      
               <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
              <label for="tab-2" class="tab-label-2">Services</label>
      
               <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
              <label for="tab-3" class="tab-label-3">Work</label>
         
               <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
              <label for="tab-4" class="tab-label-4">Contact</label>
           
             <div class="clear-shadow"></div>
            
              <div class="content">
                 <div class="content-1">
                  <section>
            <ul id="da-thumbs" class="da-thumbs">
               <li>
                  <a href="http://dribbble.com/shots/505046-Menu">
                     <img src="images/1.png" />
                     <div><span>La Sirene au bord d'un lac | Fevrier 2012</span></div>
                  </a>
               </li>
               <li>
                  <a href="http://dribbble.com/shots/504336-TN-Aquarium">
                     <img src="images/2.png" />
                     <div><span>La Sirene au bord d'un lac | Fevrier 2012</span></div>
                  </a>
               </li>
               <li>
                  <a href="http://dribbble.com/shots/504197-Mr-Crabs">
                     <img src="images/3.png" />
                     <div><span>La Sirene au bord d'un lac | Fevrier 2012</span></div>
                  </a>
               </li>
               <li>
                  <a href="http://dribbble.com/shots/503731-Gallery-of-Mo-2-Mo-logo">
                     <img src="images/4.png" />
                     <div><span>La Sirene au bord d'un lac | Fevrier 2012</span></div>
                  </a>
               </li>
               <li>   
                  <a href="http://dribbble.com/shots/503058-Ice-Cream-nom-nom">
                     <img src="images/5.png" />
                     <div><span>La Sirene au bord d'un lac | Fevrier 2012</span></div>
                  </a>
               </li>
               <li>
                  <a href="http://dribbble.com/shots/502927-My-Muse">
                     <img src="images/6.png" />
                     <div><span>La Sirene au bord d'un lac | Fevrier 2012</span></div>
                  </a>
               </li>
               <li>
                  <a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning">
                     <img src="images/7.png" />
                     <div><span>La Sirene au bord d'un lac | Fevrier 2012</span></div>
                  </a>
               </li>
               <li>
                  <a href="http://dribbble.com/shots/502523-App-Preview">
                     <img src="images/8.png" />
                     <div><span>La Sirene au bord d'un lac | Fevrier 2012</span></div>
                  </a>
               </li>
            </ul>
         </section>
        </div>
      <script type="text/javascript" src="jquery.js"></script>
      <script type="text/javascript" src="jquery.hoverdir.js"></script>
      
      <script type="text/javascript">
         $(function() {
         
            $('#da-thumbs > li').hoverdir();

         });
      </script>
               </div>
                 <div class="content-2">
                  <h2>Services</h2>
                        <p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.</p>
                  <h3>Excellence</h3>
                  <p>Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price. </p>
                </div>
                 <div class="content-3">
                  <h2>Portfolio</h2>
                        <p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p>
                  <h3>Examples</h3>
                  <p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. </p>
                </div>
                <div class="content-4">
                  <h2>Contact</h2>
                        <p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.</p>
                  <h3>Get in touch</h3>
                  <p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
                </div>
              </div>
         </section>

.tabs {
    position: absolute;
   top:22.9%;
   width: 100%;
   height:100%;
}

.tabs input {
   position: absolute;
   z-index: 1000;
   width: 120px;
   height: 40px;
   left: 0px;
   top: 0px;
   opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
   cursor: pointer;
}
.tabs input#tab-2{
   top: 40px;
}
.tabs input#tab-3{
   top: 80px;
}
.tabs input#tab-4{
   top: 120px;
}

.tabs label {
   font-size: 15px;
   line-height: 40px;
   height: 40px;
   position: relative;
   padding: 0 20px;
   display: block;
   width: 80px;
   color: #909090;
   letter-spacing: 1px;
   text-transform: uppercase;
   font-weight: bold;
   text-align: right;
   float: left;
   clear: both;
    border-radius: 3px 0 0 3px;
}

.tabs label:after {
    content: '';
   background: #fff;
   position: absolute;
   right: -2px;
   top: 0;
   width: 2px;
   height: 100%;
}

.tabs input:hover + label {
   background: #5ba4a4;
}

.tabs label:first-of-type {
    z-index: 4;
}

.tab-label-2 {
    z-index: 3;
}

.tab-label-3 {
    z-index: 2;
}

.tab-label-4 {
    z-index: 1;
}

.tabs input:checked + label {
    background: #fff;
   z-index: 6;
}

.clear-shadow {
   clear: both;
}

.content {
   position: relative;
    width: auto;
   margin: -175px 0 0 120px;
   height: 400px;
   z-index: 5;
   overflow: hidden;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    border-radius: 3px;
}

.content div {
    position: absolute;
   top: 0;
   padding: 10px 40px;
   z-index: 1;
    opacity: 0;
    -webkit-transition: all linear 0.5s;
    -moz-transition: all linear 0.5s;
    -o-transition: all linear 0.5s;
    -ms-transition: all linear 0.5s;
    transition: all linear 0.5s;
}

.content div{
   -webkit-transform: translateY(-450px);
   -moz-transform: translateY(-450px);
   -o-transform: translateY(-450px);
   -ms-transform: translateY(-450px);
   transform: translateY(-450px);
}

.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4 {
    -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
    z-index: 100;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: all ease-out 0.3s 0.3s;
    -moz-transition: all ease-out 0.3s 0.3s;
    -o-transition: all ease-out 0.3s 0.3s;
    -ms-transition: all ease-out 0.3s 0.3s;
    transition: all ease-out 0.3s 0.3s;
}

.content div h2,
.content div h3{
   color: #398080;
}
.content div p {
   font-size: 14px;
   line-height: 22px;
   font-style: italic;
   text-align: left;
   margin: 0;
   color: #777;
   padding-left: 15px;
   font-family: Cambria, Georgia, serif;
   border-left: 8px solid rgba(63,148,148, 0.1);
}

.da-thumbs {
   list-style: none;
   width: 100%;
   height: 100%;
   position: relative;
   margin: 20px auto;   
   padding: 0;
}
.da-thumbs li {
   float: left;
   margin: 5px;
   background: #fff;
   padding: 8px;
   position: relative;
   box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.da-thumbs li a,
.da-thumbs li a img {
   display: block;
   position: relative;
   width:200px;
   height:200px;
}
.da-thumbs li a {
   overflow: hidden;
}
.da-thumbs li a div {
   position: absolute;
   background: rgba(75,75,75,0.7);
   width: 100%;
   height: 100%;
}
.da-thumbs li a div.da-animate {
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
/* Initial state classes: */
.da-slideFromTop {
   left: 0px;
   top: -100%;
}
.da-slideFromBottom {
   left: 0px;
   top: 100%;
}
.da-slideFromLeft {
   top: 0px;
   left: -100%;
}
.da-slideFromRight {
   top: 0px;
   left: 100%;
}
/* Final state classes: */
.da-slideTop {
   top: 0px;
}
.da-slideLeft {
   left: 0px;
}
.da-thumbs li a div span {
   display: block;
   padding: 10px 0;
   margin: 40px 20px 20px 20px;
   text-transform: uppercase;
   font-weight: normal;
   color: rgba(255,255,255,0.9);
   text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
   border-bottom: 1px solid rgba(255,255,255,0.5);
   box-shadow: 0 1px 0 rgba(0,0,0,0.1), 0 -10px 0 rgba(255,255,255,0.3);
}

(function( $, undefined ) {
      
   /*
    * HoverDir object.
    */
   $.HoverDir             = function( options, element ) {
   
      this.$el   = $( element );
      
      this._init( options );
      
   };
   
   $.HoverDir.defaults    = {
      hoverDelay   : 0,
      reverse      : false
   };
   
   $.HoverDir.prototype    = {
      _init             : function( options ) {
         
         this.options       = $.extend( true, {}, $.HoverDir.defaults, options );
         
         // load the events
         this._loadEvents();
         
      },
      _loadEvents         : function() {
         
         var _self = this;
         
         this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function( event ) {
            
            var $el         = $(this),
               evType      = event.type,
               $hoverElem   = $el.find( 'div' ),
               direction   = _self._getDir( $el, { x : event.pageX, y : event.pageY } ),
               hoverClasses= _self._getClasses( direction );
            
            $hoverElem.removeClass();
            
            if( evType === 'mouseenter' ) {
               
               $hoverElem.hide().addClass( hoverClasses.from );
               
               clearTimeout( _self.tmhover );
               
               _self.tmhover   = setTimeout( function() {
                  
                  $hoverElem.show( 0, function() {
                     $(this).addClass( 'da-animate' ).addClass( hoverClasses.to );
                  } );
                  
               
               }, _self.options.hoverDelay );
               
            }
            else {
            
               $hoverElem.addClass( 'da-animate' );
               
               clearTimeout( _self.tmhover );
               
               $hoverElem.addClass( hoverClasses.from );
               
            }
               
         } );
         
      },
      // credits : http://stackoverflow.com/a/3647634
      _getDir            : function( $el, coordinates ) {
         
            /** the width and height of the current div **/
         var w = $el.width(),
            h = $el.height(),

            /** calculate the x and y to get an angle to the center of the div from that x and y. **/
            /** gets the x value relative to the center of the DIV and "normalize" it **/
            x = ( coordinates.x - $el.offset().left - ( w/2 )) * ( w > h ? ( h/w ) : 1 ),
            y = ( coordinates.y - $el.offset().top  - ( h/2 )) * ( h > w ? ( w/h ) : 1 ),
         
            /** the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123);**/
            /** first calculate the angle of the point,
            add 180 deg to get rid of the negative values
            divide by 90 to get the quadrant
            add 3 and do a modulo by 4  to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/
            direction = Math.round( ( ( ( Math.atan2(y, x) * (180 / Math.PI) ) + 180 ) / 90 ) + 3 )  % 4;
         
         return direction;
         
      },
      _getClasses         : function( direction ) {
         
         var fromClass, toClass;
         
         switch( direction ) {
            case 0:
               // from top
               ( !this.options.reverse ) ? fromClass = 'da-slideFromTop' : fromClass = 'da-slideFromBottom';
               toClass      = 'da-slideTop';
               break;
            case 1:
               // from right
               ( !this.options.reverse ) ? fromClass = 'da-slideFromRight' : fromClass = 'da-slideFromLeft';
               toClass      = 'da-slideLeft';
               break;
            case 2:
               // from bottom
               ( !this.options.reverse ) ? fromClass = 'da-slideFromBottom' : fromClass = 'da-slideFromTop';
               toClass      = 'da-slideTop';
               break;
            case 3:
               // from left
               ( !this.options.reverse ) ? fromClass = 'da-slideFromLeft' : fromClass = 'da-slideFromRight';
               toClass      = 'da-slideLeft';
               break;
         };
         
         return { from : fromClass, to: toClass };
               
      }
   };
   
   var logError          = function( message ) {
      if ( this.console ) {
         console.error( message );
      }
   };
   
   $.fn.hoverdir         = function( options ) {
   
      if ( typeof options === 'string' ) {
         
         var args = Array.prototype.slice.call( arguments, 1 );
         
         this.each(function() {
         
            var instance = $.data( this, 'hoverdir' );
            
            if ( !instance ) {
               logError( "cannot call methods on hoverdir prior to initialization; " +
               "attempted to call method '" + options + "'" );
               return;
            }
            
            if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
               logError( "no such method '" + options + "' for hoverdir instance" );
               return;
            }
            
            instance[ options ].apply( instance, args );
         
         });
      
      }
      else {
      
         this.each(function() {
         
            var instance = $.data( this, 'hoverdir' );
            if ( !instance ) {
               $.data( this, 'hoverdir', new $.HoverDir( options, this ) );
            }
         });
      
      }
      
      return this;
      
   };
   
})( jQuery );