Ajax Loader
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
<head>
4
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
5
<title>Sleek CSS3 Box Animation(Demo)</title>
6
<link type="text/css" rel="stylesheet" media="all" href="styles.css" />
7
</head>
8
 
9
<body>
10
  <div id="container">
11
    <div class="boxxy">
12
      <a href="http://dribbble.com/shots/489532-Banking-App" target="_blank" class="anchor-hover">
13
        <img src="http://designm.ag/previews/css3-box-animation/images/sendmoney.png" width="400" height="300" />
14
        <span class="details">
15
          <h2>Banking App</h2>
16
          <p class="desc">Here's a full shot of the send money transaction for this "secret" banking app which I've been working on. This is an early concept, I haven't landed the full project yet, but hoping they like the concept so far.</p>
17
          <span class="pubdate">Published March 28, 2012</span>
18
          <span class="viewlink">View on Dribbble &rarr;</span>
19
        </span>
20
      </a>
21
    </div>
22
    
23
    <div class="boxxy">
24
      <a href="http://dribbble.com/shots/489557-Notes-iOS-Icon" target="_blank" class="anchor-hover">
25
        <img src="http://designm.ag/previews/css3-box-animation/images/appiconios.png" width="400" height="300" />
26
        <span class="details">
27
          <h2>Notes iOS Icon</h2>
28
          <p class="desc"></p>
29
          <span class="pubdate">Published March 28, 2012</span>
30
          <span class="viewlink">View on Dribbble &rarr;</span>
31
        </span>
32
      </a>
33
    </div>
34
    
35
    <div class="boxxy">
36
      <a href="http://dribbble.com/shots/489296-Restaurant" target="_blank" class="anchor-hover">
37
        <img src="http://designm.ag/previews/css3-box-animation/images/restaurant-texture.png" width="400" height="300" />
38
        <span class="details">
39
          <h2>Restaurant</h2>
40
          <p class="desc">Playing with some textures for the Restaurant menu. I'll never get tired of wood.<br /><br />Feedback welcome!</p>
41
          <span class="pubdate">Published March 27, 2012</span>
42
          <span class="viewlink">View on Dribbble &rarr;</span>
43
        </span>
44
      </a>
45
    </div>
46
  </div>
47
</body>
48
</html>
49
 
 
CSS
/** default styles **/
1
/** default styles **/
2
* { margin: 0; padding: 0; }
3
html { height: 101%; }
4
 
5
body { background: #e6e6e6; font-family: Calibri, Verdana, Arial, sans-serif; font-size: 62.5%; color: #333; line-height: 1; }
6
 
7
#container { width: 600px; margin: 0 auto; padding-top: 40px; padding-bottom: 85px; }
8
 
9
a { text-decoration: none; }
10
 
11
/*** official boxes w. animations ***/
12
.boxxy { display: block; margin: 0 auto; background: #fff; margin-bottom: 22px; -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
13
-moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); width: 400px; padding: 7px 9px; 
14
transition: box-shadow 0.3s linear 0s; -webkit-transition: box-shadow 0.3s linear 0s; -moz-transition: box-shadow 0.3s linear 0s;
15
 -o-transition: box-shadow 0.3s linear 0s; 
16
}
17
 
18
.anchor-hover { display: block; position: relative; }
19
.anchor-hover img { position: relative; }
20
 
21
.anchor-hover .details { opacity: 0; position: absolute; top: 0px; left: 0px; width: 390px; height: 290px; margin: 0; padding-top: 10px; padding-left: 10px; font-size: 1.2em; line-height: 1.4em; text-decoration: none; color: #888; background: rgba(255, 255, 255, 0.85); overflow: hidden; 
22
transition: opacity 0.25s linear 0s; -webkit-transition: opacity 0.25s linear 0s; -moz-transition: opacity 0.25s linear 0s;
23
 -o-transition: opacity 0.25s linear 0s; 
24
}
25
 
26
.anchor-hover .details h2 { font-weight: bold; font-size: 1.5em; color: #444; text-decoration: none; margin-bottom: 8px; }
27
.anchor-hover .details p.desc { font-weight: normal; font-size: 1.2em; line-height: 1.3em; color: #555; }
28
.anchor-hover .details span.pubdate { position: absolute; bottom: 10px; left: 10px; font-weight: bold; font-family: "Trebuchet MS", Tahoma, sans-serif; }
29
.anchor-hover .details span.viewlink { position: absolute; bottom: 10px; right: 10px; font-weight: bold; color: #bb599e; font-size: 1.3em; }
30
 
31
.anchor-hover:hover .details { opacity: 1; }
32
.boxxy:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) inset, 0 0 10px rgba(182, 70, 165, 0.7);
33
 -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) inset, 0 0 10px rgba(182, 70, 165, 0.7);
34
 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) inset, 0 0 10px rgba(182, 70, 165, 0.7); 
35
 }
 

Using CSS3 Animations to Build a Sleek Box UI

CSSDeck G+