Ajax Loader
HTML 
<div id="content">
1
<div id="content">
2
  <header><h1>Last Pixar Films</h1></header>
3
  <nav>
4
    <div class="item">
5
        <input type="radio" name="pixar" class="selector-1" id="fts"/>
6
      <label for="fts">Toy Story
7
        <img id="fts" src="http://img41.imageshack.us/img41/821/toystory3affichefriendl.jpg"/>
8
      </label>
9
10
        <input  type="radio" name="pixar" class="selector-2" id="fup"/>
11
        <label for="fup">Up
12
                <img id="fup" src="http://img696.imageshack.us/img696/5232/upposter2.jpg"/>
13
        </label>
14
15
        <input  type="radio" name="pixar" class="selector-3" id="fwe"/>
16
        <label for="fwe">Wall-e
17
              <img  id="fwe" src="http://img14.imageshack.us/img14/7489/walleposteraffichec1eed.jpg"/>
18
        </label>
19
    </div>
20
21
 
22
  </nav>
23
 
24
</div>
25
 
CSS 
body {
1
body {
2
    -webkit-font-smoothing: antialiased;
3
    background-color: #CCC;
4
    background-image: -webkit-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%),                      -webkit-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%),                      -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%),                      -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
5
    background-image: -o-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%),                      -o-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%),                      -o-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%),                        -o-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
6
    background-image: -moz-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%),                       -moz-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%),                        -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%),                        -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
7
    background-image: -ms-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%),                        -ms-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%),                        -ms-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%),                        -ms-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
8
    /*background-size*/
9
    -webkit-background-size: 23px, 29px, 37px, 53px;
10
    -moz-background-size: 23px, 29px, 37px, 53px;
11
    -o-background-size: 23px, 29px, 37px, 53px;
12
    background-size: 23px, 29px, 37px, 53px;
13
    padding-top: 50px;
14
    text-align: center;
15
}
16
input { display: none }
17
#content {
18
    width: 320px;
19
    margin: auto;
20
}
21
h1 {
22
    text-shadow: -1px 0 0 #fff, 0 1px 0 #000;
23
    color: #333;
24
    opacity: 0.4;
25
    font-size: 40px;
26
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
27
    font-weight: 300;
28
    border-top: 1px solid rgba(0,0,0,0.15);
29
    border-bottom: 1px solid rgba(0,0,0,0.15);
30
    /*box-shadow*/
31
    -webkit-box-shadow: 0px 1px 0px 0px white, inset 0px 1px 0px 0px white;
32
    -moz-box-shadow: 0px 1px 0px 0px white, inset 0px 1px 0px 0px white;
33
    box-shadow: 0px 1px 0px 0px white, inset 0px 1px 0px 0px white;
34
}
35
p {
36
    display: block;
37
    width: 200px;
38
    margin: 100px auto;
39
}
40
img {
41
    width: 140px;
42
    display: block;
43
    opacity: 0;
44
}
45
nav {
46
    margin: -10px;
47
    padding: 1px;
48
    height: 22px;
49
    width: 500px;
50
    /*border-radius*/
51
    -webkit-border-radius: 5px;
52
    -moz-border-radius: 5px;
53
    border-radius: 5px;
54
}
55
ul li {
56
    display: block;
57
    float: left;
58
    margin: 2px 15px;
59
}
60
div.item {
61
    display: block;
62
    margin: 20px;
63
}
64
label {
65
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
66
    font-weight: 300;
67
    text-decoration: none;
68
    text-shadow: 0 -1px 0px #fff, 0 1px 0 #000;
69
    color: #666;
70
    opacity: 1;
71
    cursor: pointer;
72
    width: 100px;
73
    height: 40px;
74
    display: block;
75
    float: left;
76
    -webkit-font-smoothing: antialiased;
77
}
78
input:checked + label:hover > img { opacity: 1 }
79
img {
80
    display: block;
81
    float: left;
82
    padding: 10px;
83
    background: rgba(255,255,255,0.7);
84
    border: 3px solid rgba(255,255,255,0.8);
85
    /*border-radius*/
86
    -webkit-border-radius: 3px;
87
    -moz-border-radius: 3px;
88
    border-radius: 3px;
89
    /*transition*/
90
    -webkit-transition: 1.3s all cubic-bezier(.71,-1.5,0,1.58) .1s;
91
    -moz-transition: 1.3s all cubic-bezier(.71,-1.5,0,1.58) .1s;
92
    -o-transition: 1.3s all cubic-bezier(.71,-1.5,0,1.58) .1s;
93
    transition: 1.3s all cubic-bezier(.71,-1.5,0,1.58) .1s;
94
    /*box-shadow*/
95
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,.3);
96
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,.3);
97
    box-shadow: 0 3px 3px rgba(0,0,0,.3);
98
    position: absolute;
99
    top: 200px;
100
    left: 41%;
101
}
102
div img:before {
103
    border: solid;
104
    border-color: #111 transparent;
105
    border-color: rgba(255,255,255,.9) transparent;
106
    border-width: 10px .7em .7em .7em;
107
    content: "";
108
    display: block;
109
    width: 1000px;
110
    left: 8.2em;
111
    margin: ;
112
    position: absolute;
113
    top: 200px;
114
}
115
/*~Behavior~*/
116
nav:hover > #pane-hide, #pane-hide:hover { margin: 60px auto }
117
p:hover { color: transparent }
118
.item input.selector-1:checked + label[for=fts] img, .item input.selector-2:checked + label[for=fup] img, .item input.selector-3:checked + label[for=fwe] img {
119
    opacity: 1;
120
    width: 200px;
121
    margin: 30px auto;
122
    z-index: 999;
123
    position: absolute;
124
    top: 200px;
125
    left: 41%;
126
}
127
.item input.selector-1:checked + label[for=fts], .item input.selector-2:checked + label[for=fup], .item input.selector-3:checked + label[for=fwe] { border-bottom: 1px dashed #999 }
 

CSS3 Fading Panel (v2)

CSSDeck G+