Ajax Loader
HTML 
<div id="show">
1
<div id="show">
2
  <ul>
3
    <li><a href="#" >Effect 1</a></li>
4
    <li><a href="#" >Effect 2</a></li>
5
    <li><a href="#" >Effect 3</a></li>
6
    <li><a href="#" >Effect 4</a></li>
7
    <li><a href="#" >Effect 5</a></li>
8
    <li><a href="#" >Effect 6</a></li>
9
    <li><a href="#" >Effect 7</a></li>
10
  </ul>
11
  <div id="presentation">
12
    <a class="caption" href="http://dribbble.com/shots/1136019-Google-Fonts-flat-longshade-icon" data-title="Data-attribute ♥ :pseudo-elements"  data-description="Google Fonts flat long-shadow icons on my dribbble profile "><img src="http://lab.web-gate.fr/images/gfont.png" alt="Google Fonts flat long shadow icon"/></a>
13
 
14
<a class="caption" href="http://dribbble.com/shots/1145136-PatchworkLabs-Corporate-Branding-WIP" data-title="Data-attribute ♥ :pseudo-elements" data-description="A shot from the awesome work of Axel Hermann."><img src="http://lab.web-gate.fr/images/axelHermann.png" alt="Illustration of Axel Hermann"/></a>  
15
 
16
<a class="caption" href="http://dribbble.com/shots/1091421-Infographic-resume-PSD" data-title="Data-attribute ♥ :pseudo-elements" data-description="An infographic resume made by @KevinCdnc."><img src="http://lab.web-gate.fr/images/cvKev" alt="Infographic resume .PSD of Kevin Cudennec"/></a>  
17
  </div>
18
  </div>
19
 
20
 
21
      <script charset="utf-8" src="http://code.jquery.com/jquery-latest.min.js"></script>
22
 
 
CSS 
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
1
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
2
body {
3
  font-family: 'Lato', Calibri, Arial, sans-serif;
4
  color: #89867e;
5
  background: #666;
6
}
7
 
8
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;-webkit-font-smoothing:antialiased}
9
 
10
a {
11
    text-decoration: none;
12
    outline: none;
13
}
14
 
15
a img {
16
    border: none;
17
}
18
 
19
.caption {
20
    -webkit-backface-visibility: hidden; /* prevent flash when embedding fiddle */
21
  display: inline-block;
22
  position: relative;
23
  margin: 10px;
24
  overflow: hidden;
25
  background: #000;
26
  perspective:120px;/*For the .effect6 | .effect7 */
27
}
28
 
29
.caption img {
30
  display: block;
31
  width:260px;
32
  max-width: 100%;
33
  -webkit-transition: opacity 0.3s ease-in-out;
34
  -moz-transition: opacity 0.3s ease-in-out;
35
  transition: opacity 0.3s ease-in-out;
36
}
37
 
38
.caption:hover img {
39
  opacity: 0.5;
40
}
41
 
42
.caption::after,
43
.caption::before {
44
  position: absolute;
45
  width: 100%;
46
  height: 50%;
47
;
48
  color: #fff;
49
    z-index: 1;
50
    -webkit-transition: -webkit-transform 0.3s ease-in-out, opacity .3s ease-in-out;
51
  -moz-transition: -moz-transform 0.3s ease-in-out, opacity .3s ease-in-out;
52
  transition: transform 0.3s ease-in-out, opacity .3s ease-in-out;
53
}
54
 
55
.caption::after {
56
  content: attr(data-title);
57
  top: 0;
58
  background: #af4efb;
59
  font-size:1.4em;
60
  font-weight: 300;
61
  padding: 30px;
62
    opacity:0;
63
}
64
 
65
.caption::before {
66
  content: ' ' attr(data-description) '';
67
  top: 50%;
68
  background: #1f0282;
69
  font-size: 14px;
70
  padding: 20px;
71
  opacity:0;
72
}
73
.caption:hover::after,
74
.caption:hover::before {
75
    opacity:1;
76
}
77
/* Effects */
78
 
79
/* Effect 1*/
80
.effect1 .caption::after {
81
  -webkit-transform: translateY(-100%);
82
  -moz-transform: translateY(-100%);
83
  transform: translateY(-100%);
84
}
85
 
86
.effect1 .caption::before {
87
  -webkit-transform: translateX(100%);
88
  -moz-transform: translateX(100%);
89
  transform: translateX(100%);
90
}
91
.effect1 .caption:hover::after,
92
.effect1 .caption:hover::before {
93
  -webkit-transform: translateY(0%);
94
  -moz-transform: translateY(0%);
95
  transform: translateY(0%);  
96
}
97
 
98
/* Effect 2*/
99
.effect2 .caption::after {
100
  -webkit-transform: translate(-100%);
101
  -moz-transform: translate(-100%);
102
  transform: translate(-100%);
103
}
104
 
105
.effect2 .caption::before {
106
  -webkit-transform: translate(100%);
107
  -moz-transform: translate(100%);
108
  transform: translate(100%);
109
}
110
.effect2 .caption:hover::after,
111
.effect2 .caption:hover::before {
112
  -webkit-transform: translate(0%);
113
  -moz-transform: translate(0%);
114
  transform: translate(0%);  
115
}
116
 
117
/* Effect 3*/
118
.effect3 .caption::after {
119
  -webkit-transform: translate(-100%) scale(2);
120
  -moz-transform: translate(-100%)  scale(2);
121
  transform: translate(-100%)  scale(2);
122
}
123
 
124
.effect3 .caption::before {
125
  -webkit-transform: translate(100%)  scale(2);
126
  -moz-transform: translate(100%)  scale(2);
127
  transform: translate(100%)  scale(2);
128
}
129
.effect3 .caption:hover::after,
130
.effect3 .caption:hover::before {
131
  -webkit-transform: translate(0%)  scale(1);
132
  -moz-transform: translate(0%)  scale(1);
133
  transform: translate(0%)  scale(1);  
134
}
135
 
136
/* Effect 4*/
137
.effect4 .caption::after {
138
  -webkit-transform: scale(2);
139
  -moz-transform:   scale(2);
140
  transform: scale(2);
141
}
142
 
143
.effect4 .caption::before {
144
  -webkit-transform:  scale(2);
145
  -moz-transform:   scale(2);
146
  transform:  scale(2);
147
}
148
.effect4 .caption:hover::after,
149
.effect4 .caption:hover::before {
150
  -webkit-transform: scale(1);
151
  -moz-transform: scale(1);
152
  transform: scale(1);  
153
}
154
 
155
/* Effect 5*/
156
.effect5 .caption::after {
157
  -webkit-transform: scale(0);
158
  -moz-transform:   scale(0);
159
  transform: scale(0);
160
}
161
 
162
.effect5 .caption::before {
163
  -webkit-transform:  scale(0);
164
  -moz-transform:   scale(0);
165
  transform:  scale(0);
166
}
167
.effect5 .caption:hover::after,
168
.effect5 .caption:hover::before {
169
  -webkit-transform: scale(1);
170
  -moz-transform: scale(1);
171
  transform:  scale(1);  
172
}
173
 
174
/* Effect 6*/
175
.effect6 .caption::after {
176
  -webkit-transform:  rotateX(100deg) perspective(20px);
177
  -moz-transform:    rotateX(100deg) perspective(20px);
178
  transform: rotateX(100deg) perspective(20px);
179
}
180
 
181
.effect6 .caption::before {
182
  -webkit-transform:   rotateX(100deg) perspective(20px);
183
  -moz-transform:    rotateX(100deg) perspective(20px);
184
  transform: rotateX(-100deg) perspective(20px);
185
}
186
.effect6 .caption:hover::after,
187
.effect6 .caption:hover::before {
188
  -webkit-transform: rotateX(0deg);
189
  -moz-transform: rotateX(0deg);
190
  transform:  rotateX(0deg);  
191
}
192
/* Effect 7*/
193
.effect7 .caption::after {
194
  -webkit-transform:  rotateX(-100deg) perspective(20px);
195
  -moz-transform:    rotateX(-100deg) perspective(20px);
196
  transform: rotateX(-100deg) perspective(20px);
197
}
198
 
199
.effect7 .caption::before {
200
  -webkit-transform:   rotateX(100deg) perspective(20px);
201
  -moz-transform:    rotateX(100deg) perspective(20px);
202
  transform: rotateX(100deg) perspective(20px);
203
}
204
.effect7 .caption:hover::after,
205
.effect7 .caption:hover::before {
206
  -webkit-transform: rotateX(0deg);
207
  -moz-transform: rotateX(0deg);
208
  transform:  rotateX(0deg);  
209
}
210
/* Color Style */
211
.caption:nth-child(1):before{
212
  background:#dd473d;
213
}
214
.caption:nth-child(1):after{
215
  background:#a83026;
216
}
217
 
218
/**/
219
.caption:nth-child(2):before{
220
  background:#74b7cd ;
221
}
222
.caption:nth-child(2):after{
223
  background:#bbdaad;
224
}
225
 
226
/**/
227
.caption:nth-child(3):before{
228
  background:#2f5d5d;
229
}
230
.caption:nth-child(3):after{
231
  background:#40c3c4;
232
}
233
 
234
/*features (controls ect)*/
235
 
236
 
237
#presentation{
238
  width:900px;
239
margin:auto;
240
float:left;}
241
#show ul{display:block;margin:;padding:0 8px;width:100%;margin:auto;}
242
#show ul li{display:block;float:left; width:70px;padding:4px 5px;background:rgba(0,0,0,.4); margin:6px 4px;}
243
#show ul li a{color:#fff;}
244
#show ul li:hover{background:#dd473d;}
245
#show ul li:nth-child(2):hover{background:#bbdaad;}
246
#show ul li:nth-child(3):hover{background:#40c3c4;}
247
 
248
 
249
#show ul li:nth-child(1).active{background:#dd473d;}
250
#show ul li:nth-child(2).active{background:#bbdaad;}
251
#show ul li:nth-child(3).active{background:#40c3c4;}
252
#show ul li:nth-child(4).active{background:#dd473d;}
253
#show ul li:nth-child(5).active{background:#bbdaad;}
254
#show ul li:nth-child(6).active{background:#40c3c4;}
255
#show ul li:nth-child(7).active{background:#dd473d;}
 
JavaScript 
/*
1
/*
2
* Inspired by http://goo.gl/TlY1k (codrops)
3
*
4
*
5
*
6
* 2013 by @LukyVj
7
*/
8
 
9
$(document).ready(function(){
10
  var item = $('#show ul li');
11
  var butOne = $('ul li');
12
  var butTwo = $('ul li:nth-child(2)');
13
  var butThree = $('ul li:nth-child(3)');
14
  var butFour = $('ul li:nth-child(4)');
15
  var butFive = $('ul li:nth-child(5)');
16
  var butSix = $('ul li:nth-child(6)');
17
  var butSeven = $('ul li:nth-child(7)');
18
19
  var pres = $("#presentation")
20
21
  item.on('click', function(){
22
    $(this).addClass('active');
23
    $('*').not($(this)).removeClass('active');
24
  });
25
26
  butOne.on('click', function(event){
27
    event.preventDefault();
28
    pres.addClass('effect1');
29
    pres.removeClass('effect2');
30
    pres.removeClass('effect3');
31
    pres.removeClass('effect4');
32
    pres.removeClass('effect5');
33
     pres.removeClass('effect6');
34
    pres.removeClass('effect7');
35
 });
36
   butTwo.on('click', function(event){
37
    event.preventDefault();
38
    pres.addClass('effect2');
39
    pres.removeClass('effect1');
40
    pres.removeClass('effect3');
41
    pres.removeClass('effect4');    
42
    pres.removeClass('effect5');
43
    pres.removeClass('effect6');
44
    pres.removeClass('effect7');
45
  });
46
   butThree.on('click', function(event){
47
    event.preventDefault();
48
    pres.addClass('effect3');
49
    pres.removeClass('effect1');
50
    pres.removeClass('effect2');
51
    pres.removeClass('effect4');
52
    pres.removeClass('effect5');
53
    pres.removeClass('effect6');
54
    pres.removeClass('effect7');
55
  });
56
   butFour.on('click', function(event){
57
    event.preventDefault();
58
    pres.addClass('effect4');
59
    pres.removeClass('effect2');
60
    pres.removeClass('effect3');
61
    pres.removeClass('effect1');
62
    pres.removeClass('effect5');
63
    pres.removeClass('effect6');
64
    pres.removeClass('effect7');
65
  });
66
  butFive.on('click', function(event){
67
    event.preventDefault();
68
    pres.addClass('effect5');
69
    pres.removeClass('effect2');
70
    pres.removeClass('effect3');
71
    pres.removeClass('effect1');
72
    pres.removeClass('effect4');
73
    pres.removeClass('effect6');
74
    pres.removeClass('effect7');
75
  });
76
   butSix.on('click', function(event){
77
    event.preventDefault();
78
    pres.addClass('effect6');
79
    pres.removeClass('effect2');
80
    pres.removeClass('effect3');
81
    pres.removeClass('effect1');
82
    pres.removeClass('effect4');
83
    pres.removeClass('effect5');
84
    pres.removeClass('effect7');
85
  });
86
    butSeven.on('click', function(event){
87
    event.preventDefault();
88
    pres.addClass('effect7');
89
    pres.removeClass('effect2');
90
    pres.removeClass('effect3');
91
    pres.removeClass('effect1');
92
    pres.removeClass('effect4');
93
    pres.removeClass('effect5');
94
    pres.removeClass('effect6');
95
  });
96
});
 

data-attributes love pseudo elements

CSSDeck G+