Ajax Loader
HTML 
<div class='slider'>
1
<div class='slider'>
2
  <input checked='' class='slide1' name='thumbnail' type='radio' />
3
  <input class='slide2' name='thumbnail' type='radio' />
4
  <input class='slide3' name='thumbnail' type='radio' />
5
  <input class='slide4' name='thumbnail' type='radio' />
6
  <div class='images'></div>
7
</div>
8
<h3>
9
  created by
10
  <a href='https://twitter.com/samarkandiy' target='_blank'>@samarkandiy</a>
11
</h3>
 
CSS 
body {
1
body {
2
  background: #ccc;
3
  width: 950px;
4
  margin: 0 auto;
5
  padding: 10px;
6
}
7
 
8
.slider {
9
  background: #111;
10
  width: 950px;
11
  height: 350px;
12
  padding: 10px;
13
  position: relative;
14
  top: 10px;
15
  box-shadow: 0 30px 50px -20px black;
16
  overflow: hidden;
17
}
18
 
19
.images {
20
  background: #ccc;
21
  width: 100%;
22
  height: 74%;
23
  transition: background .5s linear;
24
}
25
 
26
input[type='radio'] {
27
  -webkit-appearance: none;
28
  appearance: none;
29
  background-color: #444;
30
  background-size: 225px 70px;
31
  width: 225px;
32
  height: 70px;
33
  margin: 5px;
34
  cursor: pointer;
35
  position: relative;
36
  float: left;
37
  top: 270px;
38
  -webkit-filter: sepia();
39
}
40
input[type='radio']:checked {
41
  content: '';
42
  border: solid 5px #ccc;
43
  box-shadow: none;
44
  -webkit-filter: none;
45
}
46
 
47
input[type='radio']:hover{
48
  border: solid 5px #fff;
49
  -webkit-filter: none;
50
  transform: scale(1.05);
51
  z-index: 9999;
52
}
53
 
54
.slide1 {
55
  background: url(http://iweb.uz/azik/wp-content/uploads/2012/10/samarkand1.jpg);
56
}
57
 
58
.slide2 {
59
  background: url(http://iweb.uz/azik/wp-content/uploads/2012/10/samarkand2.jpg);
60
}
61
 
62
.slide3 {
63
  background: url(http://iweb.uz/azik/wp-content/uploads/2012/10/samarkand3.jpg);
64
}
65
 
66
.slide4 {
67
  background: url(http://iweb.uz/azik/wp-content/uploads/2012/10/samarkand4.jpg);
68
}
69
 
70
.slide1:checked ~ .images {
71
  background: url(http://iweb.uz/azik/wp-content/uploads/2012/10/samarkand1.jpg);
72
}
73
 
74
.slide2:checked ~ .images {
75
  background: url(http://iweb.uz/azik/wp-content/uploads/2012/10/samarkand2.jpg);
76
}
77
 
78
.slide3:checked ~ .images {
79
  background: url(http://iweb.uz/azik/wp-content/uploads/2012/10/samarkand3.jpg);
80
}
81
 
82
.slide4:checked ~ .images {
83
  background: url(http://iweb.uz/azik/wp-content/uploads/2012/10/samarkand4.jpg);
84
}
85
 
86
h3{
87
  color: #000;
88
  font-family: 'Courier';
89
  margin: 30px -15px 0 0;
90
  text-align: right;
91
  text-shadow: 2px 2px 2px #fff;
92
}
93
 
94
h3 a{
95
  color: #000;
96
  text-decoration: none;
97
}
 

Pure CSS - Image Slider

CSSDeck G+