Ajax Loader
×
HTML 
<div id="wrapper">
1
<div id="wrapper">
2
  <div id="columns">
3
    <div class="pin">
4
      <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
5
      <p>
6
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
7
        Sed feugiat consectetur pellentesque. Nam ac elit risus,
8
        ac blandit dui. Duis rutrum porta tortor ut convallis.
9
        Duis rutrum porta tortor ut convallis.
10
      </p>
11
    </div>
12
13
    <div class="pin">
14
      <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
15
      <p>
16
        Donec a fermentum nisi.
17
      </p>
18
    </div>
19
20
    <div class="pin">
21
      <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
22
      <p>
23
        Nullam eget lectus augue. Donec eu sem sit amet ligula
24
        faucibus suscipit. Suspendisse rutrum turpis quis nunc
25
        convallis quis aliquam mauris suscipit.
26
      </p>
27
    </div>
28
29
    <div class="pin">
30
      <img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" />
31
      <p>
32
        Nullam eget lectus augue. Donec eu sem sit amet ligula
33
        faucibus suscipit. Suspendisse rutrum turpis quis nunc
34
        convallis quis aliquam mauris suscipit.
35
      </p>
36
    </div>
37
38
    <div class="pin">
39
      <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
40
      <p>
41
        Donec a fermentum nisi. Integer dolor est, commodo ut
42
        sagittis vitae, egestas at augue.
43
      </p>
44
    </div>
45
46
    <div class="pin">
47
      <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
48
      <p>
49
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
50
        Sed feugiat consectetur pellentesque. Nam ac elit risus,
51
        ac blandit dui. Duis rutrum porta tortor ut convallis.
52
        Duis rutrum porta tortor ut convallis.
53
      </p>
54
    </div>
55
56
    <div class="pin">
57
      <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
58
      <p>
59
        Nullam eget lectus augue. Donec eu sem sit amet ligula
60
        faucibus suscipit. Suspendisse rutrum turpis quis nunc
61
        convallis quis aliquam mauris suscipit.
62
        Duis rutrum porta tortor ut convallis.
63
      </p>
64
    </div>
65
66
    <div class="pin">
67
      <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
68
      <p>
69
        Nullam eget lectus augue.
70
      </p>
71
    </div>
72
73
    <div class="pin">
74
      <img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" />
75
      <p>
76
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
77
        Sed feugiat consectetur pellentesque.
78
      </p>
79
    </div>
80
81
    <div class="pin">
82
      <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
83
      <p>
84
        Donec a fermentum nisi. Integer dolor est, commodo ut
85
        sagittis vitae, egestas at augue. Suspendisse id nulla
86
        ac urna vestibulum mattis. Duis rutrum porta tortor ut convallis.
87
      </p>
88
    </div>
89
90
    <div class="pin">
91
      <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
92
      <p>
93
        Donec a fermentum nisi. Integer dolor est, commodo ut
94
        sagittis vitae, egestas at augue. Suspendisse id nulla
95
        ac urna vestibulum mattis.
96
      </p>
97
    </div>
98
99
    <div class="pin">
100
      <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
101
      <p>
102
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
103
        Sed feugiat consectetur pellentesque. Nam ac elit risus,
104
        ac blandit dui. Duis rutrum porta tortor ut convallis.
105
      </p>
106
    </div>
107
108
    <div class="pin">
109
      <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
110
      <p>
111
        Donec a fermentum nisi. Integer dolor est, commodo ut
112
        sagittis vitae, egestas at augue. Suspendisse id nulla
113
        ac urna vestibulum mattis.
114
      </p>
115
    </div>
116
117
    <div class="pin">
118
      <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
119
      <p>
120
        Donec a fermentum nisi. Integer dolor est, commodo ut
121
        sagittis vitae, egestas at augue. Suspendisse id nulla
122
        ac urna vestibulum mattis.
123
      </p>
124
    </div>
125
126
    <div class="pin">
127
      <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
128
      <p>
129
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
130
        Sed feugiat consectetur pellentesque. Nam ac elit risus,
131
        ac blandit dui. Duis rutrum porta tortor ut convallis.
132
      </p>
133
    </div>
134
  </div>
135
</div>
 
CSS 
body {
1
body {
2
  background: url(http://subtlepatterns.com/patterns/scribble_light.png) ;
3
}
4
 
5
#wrapper {
6
  width: 90%;
7
  max-width: 1100px;
8
  min-width: 800px;
9
  margin: 50px auto;
10
}
11
 
12
#columns {
13
  -webkit-column-count: 3;
14
  -webkit-column-gap: 10px;
15
  -webkit-column-fill: auto;
16
  -moz-column-count: 3;
17
  -moz-column-gap: 10px;
18
  -moz-column-fill: auto;
19
  column-count: 3;
20
  column-gap: 15px;
21
  column-fill: auto;
22
}
23
 
24
.pin {
25
  display: inline-block;
26
  background: #FEFEFE;
27
  border: 2px solid #FAFAFA;
28
  box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
29
  margin: 0 2px 15px;
30
  -webkit-column-break-inside: avoid;
31
  -moz-column-break-inside: avoid;
32
  column-break-inside: avoid;
33
  padding: 15px;
34
  padding-bottom: 5px;
35
  background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
36
  opacity: 1;
37
38
  -webkit-transition: all .2s ease;
39
  -moz-transition: all .2s ease;
40
  -o-transition: all .2s ease;
41
  transition: all .2s ease;
42
}
43
 
44
.pin img {
45
  width: 100%;
46
  border-bottom: 1px solid #ccc;
47
  padding-bottom: 15px;
48
  margin-bottom: 5px;
49
}
50
 
51
.pin p {
52
  font: 12px/18px Arial, sans-serif;
53
  color: #333;
54
  margin: 0;
55
}
56
 
57
@media (min-width: 960px) {
58
  #columns {
59
    -webkit-column-count: 4;
60
    -moz-column-count: 4;
61
    column-count: 4;
62
  }
63
}
64
 
65
@media (min-width: 1100px) {
66
  #columns {
67
    -webkit-column-count: 5;
68
    -moz-column-count: 5;
69
    column-count: 5;
70
  }
71
}
72
 
73
#columns:hover .pin:not(:hover) {
74
  opacity: 0.4;
75
}
 

Untitled

CSSDeck G+