Ajax Loader
HTML 
<!doctype html>
1
<!doctype html>
2
<html lang="en">
3
<head>
4
 
5
  <meta charset="UTF-8">
6
  <title>Image Hover Effect</title>
7
 
8
</head>
9
<body>
10
 
11
  <div class="container">
12
 
13
    <figure class="image-container">
14
 
15
      <img src="http://dribbble.s3.amazonaws.com/users/252377/screenshots/1116378/m412c0-app-calendar_2x_1x.png" alt="All Calendar Icon" width="400" height="300">
16
 
17
      <figcaption class="clearfix">
18
19
        <h4>App Calendar Icon</h4>
20
        <p>by <a href="http://dribbble.com/m412c0" target="_blank">m412c0</a></p>
21
        <a href="https://twitter.com/m412c0b" class="button" target="_blank">Twitter</a>
22
 
23
      </figcaption>
24
 
25
    </figure>
26
27
  </div>
28
 
29
</body>
30
</html>
 
CSS 
@charset "utf-8";
1
@charset "utf-8";
2
/* CSS Document */
3
 
4
/* ---------- GENERAL ---------- */
5
 
6
body {
7
  background: #f2f2f2;
8
  font: 87.5%/1.5em sans-serif;
9
  margin: 0;
10
}
11
 
12
a {
13
  color: #ea4c89;
14
  text-decoration: none;
15
}
16
 
17
a:hover {
18
  color: #df3e7b;
19
}
20
 
21
h4 {
22
  color: #fff;
23
  margin: 0;
24
  padding: 0;
25
}
26
 
27
img {
28
  bottom: 0;
29
  display: block;
30
  height: auto;
31
  max-width: 100%;
32
}
33
 
34
figure {
35
  margin: 0;
36
}
37
 
38
p {
39
  margin: 0;
40
}
41
 
42
/* ---------- CLASSES ---------- */
43
 
44
.container {
45
  height: 312px;
46
  left: 50%;
47
  margin: -156px 0 0 -206px;
48
  position: absolute;
49
  top: 50%;
50
  width: 412px;
51
}
52
 
53
.button {
54
  background: #0084b4;
55
  border-radius: 3px;
56
  color: #fff;
57
  display: inline-block;
58
  font-weight: bold;
59
  padding: 4px 8px;
60
  position: absolute;
61
  right: 20px;
62
  top: 30px;
63
}
64
 
65
.button:hover {
66
  background: #2D76B9;
67
  color: #fff;
68
}
69
 
70
/* ---------- IMAGE-CONTAINER ---------- */
71
 
72
.image-container {
73
  border: 6px solid #fff;
74
  box-shadow: 0 0 5px rgba(0, 0, 0, .3);
75
  overflow: hidden;
76
  position: relative;
77
  width: 400px;
78
}
79
 
80
.image-container img {
81
  -webkit-transition: all .4s;
82
  -moz-transition: all .4s;
83
  -ms-transition: all .4s;
84
  -o-transition: all .4s;
85
  transition: all .4s;
86
}
87
 
88
.image-container:hover img {
89
  -webkit-transform: translateY(-45px);
90
  -moz-transform: translateY(-45px);
91
  -ms-transform: translateY(-45px);
92
  -o-transform: translateY(-45px);
93
  transform: translateY(-45px);
94
}
95
 
96
.image-container:hover figcaption {
97
  opacity: 1;
98
  -webkit-transform: translateY(0);
99
  -moz-transform: translateY(0);
100
  -ms-transform: translateY(0);
101
  -o-transform: translateY(0);
102
  transform: translateY(0);
103
  -webkit-transition: -webkit-transform .4s, opacity .1s;
104
  -moz-transition: -moz-transform .4s, opacity .1s;
105
  -ms-transition: -ms-transform .4s, opacity .1s;
106
  -o-transition: -o-transform .4s, opacity .1s;
107
  transition: transform .4s, opacity .1s;
108
}
109
 
110
.image-container figcaption {
111
  background: #283449;
112
  bottom: 0;
113
  color: #fff;
114
  height: 50px;
115
  left: 0;
116
  opacity: 0;
117
  padding: 20px;
118
  position: absolute;
119
  -webkit-transform: translateY(100%);
120
  -moz-transform: translateY(100%);
121
  -ms-transform: translateY(100%);
122
  -o-transform: translateY(100%);
123
  transform: translateY(100%);
124
  -webkit-transition: -webkit-transform .4s, opacity .1s .3s;
125
  -moz-transition: -moz-transform .4s, opacity .1s .3s;
126
  -ms-transition: -ms-transform .4s, opacity .1s .3s;
127
  -o-transition: -o-transform .4s, opacity .1s .3s;
128
  transition: transform .4s, opacity .1s .3s;
129
  width: 360px;
130
}
 

Image Hover Effect

CSSDeck G+