Ajax Loader
×
HTML 
<h2>Creative Caption Gallery</h2>
1
<h2>Creative Caption Gallery</h2>
2
<div class="image-container image-container-num1">
3
  <div class="image image-num1">
4
    <img src="http://lorempixel.com/g/300/300/technics/" />
5
  </div>
6
  <div class="caption caption-num1">
7
    <span class="bottom">There's<br>always a siren</span>
8
  </div>
9
</div><br class="break">
10
<div class="image-container image-container-num2">
11
  <div class="image image-num2">
12
    <img src="http://lorempixel.com/g/200/300/city/" />
13
  </div>
14
  <div class="caption caption-num2">
15
    Singing you to shipwreck
16
  </div>
17
</div><br class="break">
18
<div class="image-container image-container-num3">
19
  <div class="image image-num3">
20
    <img src="http://lorempixel.com/g/300/200/nightlife/" />
21
  </div><br class="break">
22
  <div class="caption caption-num3">
23
    Steer away from these rocks
24
  </div>
25
</div><br class="break">
26
<div class="image-container image-container-num4">
27
  <div class="image image-num4">
28
    <img src="http://lorempixel.com/g/300/300/transport/" />
29
  </div>
30
  <div class="caption caption-num4">
31
    We'd be a walking disaster
32
  </div><br class="break">
33
</div><br class="break">
34
<div class="image-container image-container-num5">
35
  <div class="image image-num5">
36
    <img src="http://lorempixel.com/g/300/300/abstract/" />
37
  </div>
38
  <div class="caption caption-num5">
39
    Just 'cause you feel it
40
  </div>
41
</div><br class="break">
42
<div class="image-container image-container-num6">
43
  <div class="image image-num6">
44
    <img src="http://lorempixel.com/g/200/200/people/" />
45
  </div>
46
  <div class="caption caption-num6">
47
    Doesn't mean it's there.
48
  </div>
49
</div>
50
<!--EXPERIMENTAL-->
51
<!--<br class="break">
52
<div class="image-container image-container-num7">
53
  <div class="image image-num7">
54
    <img src="http://lorempixel.com/g/300/300/animals/" />
55
  </div>
56
  <div class="caption caption-num7">
57
    Someone on your shoulder<br>
58
    Someone on your shoulder<br>
59
    There there!
60
  </div>
61
</div>-->
 
CSS 
html, body {
1
html, body {
2
  position: absolute;
3
  top: 0;
4
  left: 0;
5
  right: 0;
6
  bottom: 0;
7
  margin: 0;
8
  padding: 0;
9
  border: 0;
10
  font-family: "Lato", Segoe UI, Helvetica, sans-serif;
11
  font-size: 14px;
12
  font-weight: 100;
13
  color: #fff;
14
  text-align: center;
15
}
16
h2 {
17
  color: #333;
18
  font-size: 45px;
19
  margin: 32px;
20
}
21
.image-container {
22
  display: inline-block;
23
  position: relative;
24
  width: 200px;
25
  height: 200px;
26
  overflow: hidden;
27
  background: #fff;
28
  cursor: pointer;
29
}
30
.image {
31
  width: 200px;
32
  height: 200px;
33
  z-index: 1;
34
  transition: all .5s;
35
}
36
.image img {
37
  max-width: 100%;
38
}
39
.caption {
40
  width: 200px;
41
  height: auto;
42
  padding-top: 10px;
43
  padding-bottom: 10px;
44
  background: rgba(0,0,0,.8);
45
  z-index: 2;
46
  font-weight: 300;
47
  transition: all .5s;
48
}
49
.caption-num1 {
50
  position: relative;
51
  height: 60px;
52
  padding: none;
53
  transform: rotate(45deg) translateY(-280px) translateX(-50%);
54
}
55
.bottom {
56
  position: absolute;
57
  bottom: 15px;
58
  left: 0px;
59
  right: 0;
60
}
61
.image-container-num1:hover .caption-num1 {
62
  transform: rotate(45deg) translateY(-200px) translateX(-50%)
63
}
64
.caption-num2 {
65
  transform: translateY(140px);
66
}
67
.image-container-num2:hover .image-num2 {
68
  opacity: .8;
69
  transform: translateY(-50%) translateY(0px);
70
}
71
.image-container-num2:hover .caption-num2 {
72
  transform: translateY(-37px);
73
}
74
.image-num3 img {
75
  max-width: none;
76
  max-height: 100%;
77
}
78
.image-num3 {
79
  direction: rtl;
80
}
81
.caption-num3 {
82
  opacity: 0;
83
  width: 300px;
84
  text-align:right;
85
  padding-right: 14px;
86
  transform: translateY(-100%);
87
}
88
.image-container-num3:hover .image-num3 {
89
  transform: translateX(50%);
90
}
91
.image-container-num3:hover .caption-num3 {
92
  opacity: 1;
93
  transform: translateY(-100%) translateX(-114px);
94
}
95
.image-container-num4:hover .image-num4 {
96
  transform: scale(1.5) rotate(-10deg);
97
}
98
.image-container-num4:hover .caption-num4 {
99
  transform: translateY(-100%);
100
}
101
.image-num5 img {
102
  max-width: none;
103
  transform: translateY(-50px) translateX(-50px);
104
}
105
.caption-num5 {
106
  transform: translateY(-100%);
107
  opacity: 0;
108
}
109
.image-container-num5:hover .image-num5 {
110
  transform: rotate(45deg);
111
}
112
.image-container-num5:hover .caption-num5 {
113
  opacity: 1;
114
}
115
.caption-num6 {
116
  transform: translateY(-200px) translateY(-100%);
117
}
118
.image-container-num6:hover .caption-num6 {
119
  transform: translateY(-200px);
120
}
121
.image-container-num6:hover .image-num6 {
122
  opacity: .5;
123
}
124
.caption-num7 {
125
  height: 200px;
126
  background: none;
127
  color: #333;
128
  font-size: 20px;
129
  opacity: 0;
130
}
131
.image-container-num7:hover .caption-num7 {
132
  opacity: 1;
133
  transform: translateY(-75%);
134
}
135
.image-container-num7:hover .image-num7 {
136
  transform: scale(1.5);
137
  opacity: .15;
138
}
139
.break {
140
  display: none;
141
}
142
@media all and (max-width: 650px) {
143
  .image-container {
144
    margin: 30px;
145
    outline: solid 20px #eee;
146
  }
147
  .break {
148
    display: initial;
149
  }
150
}
 

Untitled

CSSDeck G+