Ajax Loader
×
HTML 
 <div class="d1">
1
 <div class="d1">
2
  
3
   <div class="dd1">
4
     <div class="inhalt1">INHALT</div>
5
   </div>
6
  
7
</div>
8
 <div class="d2">
9
  
10
   <div class="dd2">
11
     <div class="inhalt2">INHALT</div>
12
   </div>
13
  
14
</div>
15
 <div class="d3">
16
  
17
   <div class="dd3">
18
     <div class="inhalt3">INHALT</div>
19
   </div>
20
  
21
</div>
 
CSS 
/* BOX 1 */
1
/* BOX 1 */
2
.inhalt1{
3
  text-align:center;
4
  opacity:0;
5
  font-size:20px;
6
  font-weight:bold;
7
  color:white;
8
  padding-top: 0px;
9
  -webkit-transition: all .2s ease-out;
10
  -moz-transition: all .2s ease-out;
11
  -o-transition: all .2s ease-out;
12
  -ms-transition: all .2s ease-out;
13
  transition: all .2s ease-out;
14
}
15
.dd1:hover .inhalt1{
16
  font-size:40px;
17
  opacity:1;
18
  padding-top: 200px;
19
}
20
.d1{
21
  float:left;
22
  display:inline;
23
  cursor:pointer;
24
  width:33%;
25
  height:600px;
26
  background:url(http://38.media.tumblr.com/2099d7c99917b78d939a4ebd0cae3ce4/tumblr_mesfalmvg21r4xe0so1_r1_1280.png);
27
  background-size:130%;
28
  background-position:center center;
29
  -webkit-transition: all .2s ease-out;
30
  -moz-transition: all .2s ease-out;
31
  -o-transition: all .2s ease-out;
32
  -ms-transition: all .2s ease-out;
33
  transition: all .2s ease-out;}
34
.dd1{
35
  height:600px;
36
  background:rgba(0, 0, 0, 0.0);
37
      -webkit-transition: all .2s ease-in;
38
  -moz-transition: all .2s ease-out;
39
  -o-transition: all .2s ease-in;
40
  -ms-transition: all .2s ease-in;
41
  transition: all .2s ease-out;}
42
.d1:hover{
43
  background-position:bottom center;}
44
.dd1:hover{
45
  background:rgba(0, 0, 0, 0.7);}
46
/* BOX 2 */
47
.inhalt2{
48
  text-align:center;
49
  opacity:0;
50
  font-size:20px;
51
  font-weight:bold;
52
  color:white;
53
  padding-top: 0px;
54
  -webkit-transition: all .2s ease-out;
55
  -moz-transition: all .2s ease-out;
56
  -o-transition: all .2s ease-out;
57
  -ms-transition: all .2s ease-out;
58
  transition: all .2s ease-out;
59
}
60
.dd2:hover .inhalt2{
61
  font-size:40px;
62
  opacity:1;
63
  padding-top: 200px;
64
}
65
.d2{
66
  float:left;
67
  display:inline;
68
  cursor:pointer;
69
  width:33%;
70
  height:600px;
71
  background:url(http://37.media.tumblr.com/1ebf0b5c98a9c6ae24339a9bf18b13c2/tumblr_mi765yIuDB1qlf2x3o1_500.jpg);
72
  background-position:center center;
73
      background-size:130%;
74
      -webkit-transition: all .2s ease-out;
75
  -moz-transition: all .2s ease-out;
76
  -o-transition: all .2s ease-out;
77
  -ms-transition: all .2s ease-out;
78
  transition: all .2s ease-out;}
79
.dd2{
80
  height:600px;
81
  background:rgba(0, 0, 0, 0.0);
82
  -webkit-transition: all .2s ease-in;
83
  -moz-transition: all .2s ease-out;
84
  -o-transition: all .2s ease-in;
85
  -ms-transition: all .2s ease-in;
86
  transition: all .2s ease-out;}
87
.d2:hover{
88
  background-position:bottom center;}
89
.dd2:hover{
90
  background:rgba(0, 0, 0, 0.7);}
91
/* BOX 3 */
92
.inhalt3{
93
  text-align:center;
94
  opacity:0;
95
  font-size:20px;
96
  font-weight:bold;
97
  color:white;
98
  padding-top: 0px;
99
  -webkit-transition: all .2s ease-out;
100
  -moz-transition: all .2s ease-out;
101
  -o-transition: all .2s ease-out;
102
  -ms-transition: all .2s ease-out;
103
  transition: all .2s ease-out;
104
}
105
.dd3:hover .inhalt3{
106
  font-size:40px;
107
  opacity:1;
108
  padding-top: 200px;
109
}
110
.d3{
111
  float:left;
112
  display:inline;
113
  cursor:pointer;
114
  width:33%;
115
  height:600px;
116
  background:url(http://31.media.tumblr.com/c4fc4e97471c249b0a26a697fc34d02f/tumblr_mk33w0ofKB1s75wrgo1_1280.png);
117
  background-position:center center;
118
    background-size:150%;
119
      -webkit-transition: all .2s ease-out;
120
  -moz-transition: all .2s ease-out;
121
  -o-transition: all .2s ease-out;
122
  -ms-transition: all .2s ease-out;
123
  transition: all .2s ease-out;}
124
.dd3{
125
  height:600px;
126
  background:rgba(0, 0, 0, 0.0);
127
  -webkit-transition: all .2s ease-in;
128
  -moz-transition: all .2s ease-out;
129
  -o-transition: all .2s ease-in;
130
  -ms-transition: all .2s ease-in;
131
  transition: all .2s ease-out;}
132
.d3:hover{
133
  background-position:bottom center;}
134
.dd3:hover{
135
  background:rgba(0, 0, 0, 0.7);}
136
 
 

Untitled

CSSDeck G+