Ajax Loader
×
HTML 
<div id="lista_albuns">
1
<div id="lista_albuns">
2
<figure>
3
  <div class="c1"></div>
4
  <div class="c2"></div>
5
    <img style="background: url(http://placehold.it/220/) center center no-repeat;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=" src="An accurate description of the image!" />
6
    <figcaption>
7
      Lorem Ipsum é simplesmente uma simulação de texto da indústria.
8
      <div>16 fotos</div>
9
    </figcaption>
10
</figure>
11
</div>
 
CSS 
#lista_albuns figure {
1
#lista_albuns figure {
2
  display: inline-block;
3
  width: 220px;
4
  margin: 10px;
5
  position: relative;
6
}
7
 
8
#lista_albuns figure img {
9
  width: 220px;
10
  height: 220px;
11
  margin: 0 auto;
12
  position: relative;
13
  -webkit-border-radius: 5px;
14
  -moz-border-radius: 5px;
15
  border-radius: 5px;
16
  border: 1px solid #ccc;
17
}
18
 
19
#lista_albuns figure figcaption {
20
  font-family: arial;
21
  font-size: 13px;
22
  text-align: left;
23
  margin: 0 0 2px 0;
24
  padding: 12px 2px;
25
  color: #666666;
26
}
27
 
28
#lista_albuns figure figcaption div {
29
  padding-top: 6px;
30
  color: #999999;
31
}
32
 
33
#lista_albuns figure figcaption input {
34
  border: solid 1px transparent;
35
  padding: 10px;
36
  width: 198px;
37
  -webkit-border-radius: 3px;
38
  -moz-border-radius: 3px;
39
  border-radius: 3px;
40
}
41
 
42
#lista_albuns figure .c1, #lista_albuns figure .c2 {
43
  width: 220px;
44
  height: 220px;
45
  position: absolute;
46
  border: 1px solid #ccc;
47
  -webkit-border-radius: 5px;
48
  -moz-border-radius: 5px;
49
  border-radius: 5px;
50
}
51
 
52
#lista_albuns figure .c1 {
53
  top: 6px;
54
  left: 6px;
55
  /*background-color: red;*/
56
}
57
 
58
#lista_albuns figure .c2 {
59
  top: 3px;
60
  left: 3px;
61
  background-color: #FFFFFF;
62
}
63
 
 

Untitled

CSSDeck G+