Ajax Loader
HTML 
<ul>
1
<ul>
2
 
3
<li>
4
5
<div class="shape">
6
  <a href="#" class="overlay round"></a>
7
8
  <div class="details">
9
    <span class="heading">PLAYER UI</span>
10
    <hr />
11
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
12
    <a href="http://www.yahoo.com" class="button">VIEW</a>
13
  </div>
14
15
  <div class="bg"></div>
16
17
  <div class="base">
18
    <img src="http://www.queness.com/resources/html/masking-images-with-shape/img/1.jpg" alt="" />
19
  </div>
20
21
</div>
22
23
</li>
24
 
25
<li>
26
27
<div class="shape">
28
  <a href="#" class="overlay hexagon"></a>
29
  <div class="details">
30
    <span class="heading">IOS GAME</span>
31
    <hr />
32
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
33
    <a href="#" class="button">VIEW</a>
34
  </div>
35
  <div class="bg"></div>  <div class="base">
36
    <img src="http://www.queness.com/resources/html/masking-images-with-shape/img/2.jpg" alt="" />
37
  </div>
38
</div>
39
40
</li>
41
 
42
<li>
43
44
<div class="shape">
45
  <a href="#"  class="overlay pentagon"></a>
46
  <div class="details">
47
    <span class="heading">KEEP ROCKING</span>
48
    <hr />
49
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
50
    <a href="#" class="button">VIEW</a>
51
  </div>
52
  <div class="bg"></div>
53
  <div class="base">
54
    <img src="http://www.queness.com/resources/html/masking-images-with-shape/img/3.jpg" alt="" />
55
  </div>
56
</div>
57
58
</li>
59
 
60
<li>
61
62
<div class="shape">
63
  <a href="#"  class="overlay round"></a>
64
  <div class="details">
65
    <span class="heading">GRAPH VISUAL</span>
66
    <hr />
67
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
68
    <a href="#" class="button">VIEW</a>
69
  </div>
70
  <div class="bg"></div>
71
  <div class="base">
72
    <img src="http://www.queness.com/resources/html/masking-images-with-shape/img/4.jpg" alt="" />
73
  </div>
74
</div>
75
76
</li>
77
 
78
<li>
79
80
<div class="shape">
81
  <a href="#"  class="overlay hexagon"></a>
82
  <div class="details">
83
    <span class="heading">UI KIT</span>
84
    <hr />
85
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
86
    <a href="#" class="button">VIEW</a>
87
  </div>
88
  <div class="bg"></div>
89
  <div class="base">
90
    <img src="http://www.queness.com/resources/html/masking-images-with-shape/img/5.jpg" alt="" />
91
  </div>
92
</div>
93
94
</li>
95
 
96
<li>
97
98
<div class="shape">
99
  <a href="#"  class="overlay pentagon"></a>
100
  <div class="details">
101
    <span class="heading">PEDALS</span>
102
    <hr />
103
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
104
    <a href="#" class="button">VIEW</a>
105
  </div>
106
  <div class="bg"></div>
107
  <div class="base">
108
    <img src="http://www.queness.com/resources/html/masking-images-with-shape/img/6.jpg" alt="" />
109
  </div>
110
</div>
111
112
</li>
113
 
114
115
</ul>
 
CSS 
body {
1
body {
2
  background: #1b1e24;
3
}
4
 
5
ul {
6
  margin:0 auto;
7
  padding:0;
8
  list-style:none;
9
  width: 1100px;
10
}
11
 
12
ul li {
13
  float:left;
14
  margin:20px 25px;
15
}
16
 
17
 
18
.shape {
19
  width: 300px;
20
  height: 300px;
21
  position: relative;
22
}
23
24
  .shape .overlay {
25
    display:block;
26
    width: 310px;
27
    height: 310px;
28
    position: absolute;
29
    top:-5px;
30
    left:-5px;
31
    -webkit-transform: scale(1,1);
32
    -webkit-transition-timing-function:ease-out;
33
    -webkit-transition-duration: 0.6s;
34
    -moz-transform: scale(1,1);
35
    -moz-transition-timing-function: ease-out;
36
    -moz-transition-duration: 0.6s;
37
    transform: scale(1,1);
38
    transition-timing-function: ease-out;
39
    transition-duration: 0.6s;
40
    z-index:500;
41
    /* allow user to actually perform actions underneath this layer */
42
    pointer-events:none;
43
    background-repeat: no-repeat;
44
    outline:0;
45
  }
46
 
47
/* different shapes */
48
.shape .overlay.round {
49
  background: url(http://www.queness.com/resources/html/masking-images-with-shape/round.png);
50
}
51
 
52
.shape .overlay.hexagon {
53
  background: url(http://www.queness.com/resources/html/masking-images-with-shape/hexagon.png);
54
}
55
 
56
.shape .overlay.pentagon {
57
  background: url(http://www.queness.com/resources/html/masking-images-with-shape/pentagon.png);
58
}
59
 
60
/* hover effect */
61
.shape:hover .overlay {
62
  -webkit-transform: scale(1.07,1.07);
63
  -webkit-transition-timing-function: ease-out;
64
  -webkit-transition-duration: 0.3s;
65
  -moz-transform: scale(1.07,1.07);
66
  -moz-transition-timing-function: ease-out;
67
  -moz-transition-duration: 0.3s;
68
}
69
 
70
 
71
.shape:hover .bg {
72
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
73
  filter: alpha(opacity=80);
74
  -moz-opacity: 0.8;
75
  -khtml-opacity: 0.8;
76
  opacity: 0.8;
77
  display:block;
78
}
79
 
80
.shape:hover .details {
81
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
82
  filter: alpha(opacity=100);
83
  -moz-opacity: 1;
84
  -khtml-opacity: 1;
85
  opacity: 1;
86
  z-index:450;
87
  display:block;
88
}
89
90
91
 
92
/* content styles */
93
.shape .bg,
94
.shape .details {
95
  position: absolute;
96
  width: 300px;
97
  height:300px;
98
  display:table-cell;
99
  vertical-align:middle;
100
  text-align:center;
101
  top:0;
102
  left:0;
103
  opacity:0;
104
  -webkit-transition: all 0.3s ease;
105
  -moz-transition: all 0.3s ease;
106
  -o-transition: all 0.3s ease;
107
  transition: all 0.3s ease;
108
  display:none;
109
}
110
 
111
.shape .bg {
112
  background: #4b5a78;
113
}
114
 
115
.shape .details span.heading {
116
  font-family: 'Roboto Condensed', serif;
117
  font-size:30px;
118
  display:block;
119
  margin-top:70px;
120
  color:#fff;
121
  text-decoration:none;
122
}
123
 
124
.shape .details p {
125
  font-family: 'Abel', sans-serif;
126
  color:#fff;
127
  width: 70%;
128
  font-size:14px;
129
  margin:0 auto;
130
}
131
 
132
.shape a.button {
133
  padding:5px 15px;
134
  font-family: 'Abel', sans-serif;
135
  font-size:12px;
136
  -webkit-border-radius: 20px;
137
  -moz-border-radius: 20px;
138
  -ms-border-radius: 20px;
139
  -o-border-radius: 20px;
140
  border-radius: 20px;
141
  background: #2f3644;
142
  text-decoration:none;
143
  color:#fff;
144
  display:block;
145
  width:50px;
146
  margin:0 auto;
147
  text-align:center;
148
  margin-top:15px;
149
}
150
 
151
  .shape a.button:hover {
152
    background: #fff;
153
    color: #2f3644;
154
  }
 

Display Images with Shape Masking and Nifty Zoom Effect

CSSDeck G+