<div id="position">

 <!-- Unnecessary, just some positioning. You can change this -->

<div id="folder">

 <!-- The folder, the main holder -->

<div id="item"><!-- An individual item, labelled 'item' -->

 <a href="http://www.inserthtml.com/2011/09/css3-3d-transforms-keyframes/"> <!-- The link -->

 <img src="folder.png" alt="" /> <!-- The image you want to use, we're using folders like a dock might have! -->

 Make a Flip Card in CSS <!-- The text beside the image -->

 </a></div>

<div id="item"><!-- Repeat! -->

 <a href="http://www.inserthtml.com/2011/08/making-website-fit-screen/">

 <img src="folder.png" alt="" />

 Make Your Website Fit any Screen

 </a></div>

<div id="item"><a href="http://www.inserthtml.com/2011/08/3d-parallax-trend/">

 <img src="applications.png" alt="" />

 The 3D Parallax Effect

 </a></div>

<div id="item"><a href="http://www.inserthtml.com/2011/08/insanely-html5/">

 <img src="folder.png" alt="" />

 New Stuff in HTML5 and CSS3

 </a></div>

<div id="item"><a href="http://www.inserthtml.com/2011/08/jquery-parallax-scroll/">

 <img src="folder.png" alt="" />

 3D Parallax Scroll in jQuery

 </a></div>

<div id="more"><!-- An icon, similar to before denoting a 'more' button -->

 <a href="http://www.inserthtml.com/">

 <img src="more.png" alt="" />

 83 More In Finder

 </a></div>

<div id="folder-icon"><!-- The folder which holds everything else, covering it up when its not hovered over. -->

 <img src="folder.png" alt="" />

 Hover Over Me!</div>

</div>

<style type="text/css">

body {

    background: url("lion.jpg");

    overflow-x: hidden;

}

/* You will have to move the fan down manually (about 500px)

because of the position absolute, and I didn't

want  to  use Javascript.   However  the other

stuff can   be  changed   to  your liking,  as

regards positioning */

#position {

    position: relative;

    top: 470px;

    left: 100px;

    width: 500px;

    margin: 0px auto;

}

/* Some simple CSS */

#folder:hover a {

    opacity: 1;

}

#folder-icon {

    position: relative; z-index: 5;

    padding: 15px 0 0 0;

}

#folder {

    display: inline-block;

    width: 270px;

}

#item, #more {

    display: inline-block;

    position: absolute;

    bottom: 0;

    left: 0;

    height: 48px;

}

#item {

    padding: 5px 20px 40px 0px;

}

#more {

    padding: 0 0 45px 10px !important;

}

a {

    text-decoration: none;

    opacity: 0;

}

/* This is to make the wording beside the icons nice */

#folder div span {

    position: relative;

    bottom: 17px;

    border: 2px solid rgba(0,0,0,0);

    left: 15px;

    color: #fff;

    background: rgba(0,0,0,0.5);

    border-radius: 15px;

    padding: 4px 8px;

    font-family: 'Myriad Pro', Helvetica, Arial, sans-serif;

    text-shadow: 0px 2px 2px rgba(0,0,0,0.1);

    font-weight: bold;

}

/* Just some tidying up and hover effects */

a:hover > span {

    border: 2px solid #fff !important;

}

#more span {

    bottom: 40px !important;

    left: -5px !important;

}

#folder-icon span {

    opacity: 1 !important;

    bottom: 5px;

}

/* The float animation, excuse the odd numbers, mostly trial and error (Multiples for each browser) */

    @-webkit-keyframes item-1 { 100% { bottom: 67px; opacity: 1; -webkit-transform: rotate(1deg); } }

    @-webkit-keyframes item-2 { 100% { bottom: 137px; left: 5px; opacity: 1; -webkit-transform: rotate(3deg); } }

    @-webkit-keyframes item-3 { 100% { bottom: 205px; left: 12px; opacity: 1; -webkit-transform: rotate(5deg); } }

    @-webkit-keyframes item-4 { 100% { bottom: 273px; left: 22px; opacity: 1; -webkit-transform: rotate(7deg); } }

    @-webkit-keyframes item-5 { 100% { bottom: 340px; left: 37px; opacity: 1; -webkit-transform: rotate(9deg); } }

    @-webkit-keyframes item-6 { 100% { bottom: 427px; left: 42px; opacity: 1; -webkit-transform: rotate(11deg); } }

    /* Ugh, if only one property could be used! */

    @-ms-keyframes item-1 { 100% { bottom: 67px; left: 8px; opacity: 1; -ms-transform: rotate(1deg); } }

    @-ms-keyframes item-2 { 100% { bottom: 137px; left: 5px; opacity: 1; -ms-transform: rotate(3deg); } }

    @-ms-keyframes item-3 { 100% { bottom: 205px; left: 12px; opacity: 1; -ms-transform: rotate(5deg); } }

    @-ms-keyframes item-4 { 100% { bottom: 273px; left: 22px; opacity: 1; -ms-transform: rotate(7deg); } }

    @-ms-keyframes item-5 { 100% { bottom: 340px; left: 37px; opacity: 1; -ms-transform: rotate(9deg); } }

    @-ms-keyframes item-6 { 100% { bottom: 427px; left: 42px; opacity: 1; -ms-transform: rotate(11deg); } }

    @-moz-keyframes item-1 { 100% { bottom: 67px; left: 8px; opacity: 1; -moz-transform: rotate(1deg); } }

    @-moz-keyframes item-2 { 100% { bottom: 137px; left: 5px; opacity: 1; -moz-transform: rotate(3deg); } }

    @-moz-keyframes item-3 { 100% { bottom: 205px; left: 12px; opacity: 1; -moz-transform: rotate(5deg); } }

    @-moz-keyframes item-4 { 100% { bottom: 273px; left: 22px; opacity: 1; -moz-transform: rotate(7deg); } }

    @-moz-keyframes item-5 { 100% { bottom: 340px; left: 37px; opacity: 1; -moz-transform: rotate(9deg); } }

    @-moz-keyframes item-6 { 100% { bottom: 427px; left: 42px; opacity: 1; -moz-transform: rotate(11deg); } }

    /* Initiate the animations */

    #folder:hover > div:nth-of-type(1) {

        -webkit-animation: item-1 0.5s forwards;

        -ms-animation: item-1 0.5s forwards;

        -moz-animation: item-1 0.5s forwards;

    }

    #folder:hover > div:nth-of-type(2) {

        -webkit-animation: item-2 0.5s forwards;

        -ms-animation: item-2 0.5s forwards;

        -moz-animation: item-2 0.5s forwards;

    }

    #folder:hover > div:nth-of-type(3) {

        -webkit-animation: item-3 0.5s forwards;

        -ms-animation: item-3 0.5s forwards;

        -moz-animation: item-3 0.5s forwards;

    }

    #folder:hover > div:nth-of-type(4) {

        -webkit-animation: item-4 0.5s forwards;

        -ms-animation: item-4 0.5s forwards;

        -moz-animation: item-4 0.5s forwards;

    }

    #folder:hover > div:nth-of-type(5) {

        -webkit-animation: item-5 0.5s forwards;

        -ms-animation: item-5 0.5s forwards;

        -moz-animation: item-5 0.5s forwards;

    }

    #folder:hover > div:nth-of-type(6) {

        -webkit-animation: item-6 0.5s forwards;

        -ms-animation: item-6 0.5s forwards;

        -moz-animation: item-6 0.5s forwards;

    }

</style>