Ajax Loader
HTML 
<div id="cf">
1
<div id="cf">
2
  <img class="bottom" src="http://cssdeck.com/uploads/media/items/6/6NyhMy8.jpg" />
3
  <img class="top" src="http://cssdeck.com/uploads/media/items/0/0UycnoM.jpg" />
4
</div>
 
CSS 
#cf{
1
#cf{
2
  position:relative;
3
  width:250px;
4
  height: 300px;
5
  margin: 0 auto;
6
}
7
 
8
#cf img{
9
  position:absolute;
10
  left:0;
11
  top: 0;
12
  -webkit-transition:opacity 1s ease-in-out;
13
     -moz-transition:opacity 1s ease-in-out;
14
      -ms-transition:opacity 1s ease-in-out;
15
     -o-transition:opacity 1s ease-in-out;
16
      transition:opacity 1s ease-in-out;
17
}
18
 
19
#cf img.top {
20
  left: 20px;
21
  top: -5px;
22
}
23
 
24
#cf img.top:hover{
25
  opacity:0;
26
}
27
 
28
img.bottom{
29
  -webkit-transform: scale(1.1);
30
  -moz-transform: scale(1.1);
31
  -ms-transform: scale(1.1);
32
  -o-transform: scale(1.1);
33
  transform: scale(1.1);
34
}
 

Nice CSS3 Transition with Google Chrome Logos

CSSDeck G+