javascript transition
als je naar de website http://luckynation.be gaat en hovert over de eerste foto van 'thomas' zie je dat de tooltip ook meeroteert, hoe kan ik er voor zorgen dat de tooltip pas zichtbaar wordt wanneer de rotatie is voltooid?
Hier is mijn code:
html.php:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://jarallax.com/jquery-1.7.1.min.js"></script>
<script src="http://jarallax.com/download/jarallax-0.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
<script type="text/javascript">
jQuery('document').ready(function($){
$('[title]').removeAttr('title');
});
</script>
<script type="text/javascript">
init = function(){
var jarallax = new Jarallax();
}
</script>
</head>
<body onload="init()">
<a name="top"></a>
<br/>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/nl_BE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="header">
<div id="logo">
<img src="/images/logo-luckynation.png" height="48" width="48" border="0" />
<h1>Lucky Nation</h1>
</div>
</div>
<div id="content">
<div id="pijlomhoog"><a href="#top"><img src="/images/pijlomhoog.png" height="256" width="256" /></a></div>
<div id="pijlomlaag"><a href="#products"><img src="/images/pijlomlaag.png" height="256" width="256" /></a></div>
<div id="mtt">
<h2 class="meettheteam"><img src="/images/mtt-logo.png" height="48" width="48" border="0" />Meet the team</h2>
<h2 class="functie">Gedelegeerd bestuurders</h2>
<div class="thomas"><a href="#" id="Ik ben Thomas :-)<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed lorem rutrum, venenatis arcu eget, ultrices erat. Donec tellus mi, posuere consequat tincidunt eget, suscipit ut arcu. In euismod in ipsum gravida dignissim. Aenean sit amet sagittis leo. Nunc viverra sodales rutrum. Suspendisse ut felis consequat, elementum nibh et, ultrices lectus. Nulla a lectus mi. Fusce dignissim nisi non aliquam imperdiet. Donec in volutpat enim, sed molestie libero. Quisque placerat ante a bibendum fringilla. Donec eu augue et est molestie pulvinar nec sit amet orci. Etiam commodo sem vel consequat sollicitudin." class="tooltip"><h3 class="thomasnaam">Thomas</h3></a></div>
<div class="andreas"><a href="#" id="Ik ben Andreas :-)" class="tooltip"><h3 class="andreasnaam">Andreas</h3></a></div>
<h2 class="functie">Administratie</h2>
<div class="emiel"><a href="#" id="Ik ben Emiel :-)" class="tooltip"><h3 class="emielnaam">Emiel</h3></a></div>
<div class="jarik"><a href="#" id="Ik ben Jarik :-)" class="tooltip"><h3 class="jariknaam">Jarik</h3></a></div>
<h2 class="functie">Marketing</h2>
<div class="sien"><a href="#" id="Ik ben Sien :-)" class="tooltip"><h3 class="siennaam">Sien</h3></a></div>
<div class="ines"><a href="#" id="Ik ben Ines :-)" class="tooltip"><h3 class="inesnaam">Ines</h3></a></div>
<h2 class="functie">Kassa</h2>
<div class="aline"><a href="#" id="Ik ben Aline :-)" class="tooltip"><h3 class="alinenaam">Aline</h3></a></div>
<div class="nicolas"><a href="#" id="Ik ben Nicolas :-)" class="tooltip"><h3 class="nicolasnaam">Nicolas</h3></a></div>
<h2 class="functie">Boekhouding</h2>
<div class="ytse"><a href="#" id="Ik ben Ytse :-)" class="tooltip"><h3 class="ytsenaam">Ytse</h3></a></div>
<div class="brecht"><a href="#" id="Ik ben Brecht :-)" class="tooltip"><h3 class="brechtnaam">Brecht</h3></a></div>
<h2 class="functie">Techniek</h2>
<div class="louis"><a href="#" id="Ik ben Louis :-)" class="tooltip"><h3 class="louisnaam">Louis</h3></a></div>
<div class="thiemen"><a href="#" id="Ik ben Thiemen :-)" class="tooltip"><h3 class="thiemennaam">Thiemen</h3></a></div>
<h2 class="functie">Website</h2>
<div class="louis2"><a href="#" id="Ik ben Louis :-)" class="tooltip"><h3 class="louis2naam">Louis</h3></a></div>
<h2 class="functie">Onder leiding van</h2>
<div class="mvandamme"><a href="#" id="Ik bent M. Vandamme :-)" class="tooltip"><h3 class="mvandammenaam">M. Vandamme</h3></a></div>
<h2 class="meettheteam"><img src="/images/lu-logo.png" height="48" width="48" border="0" />Like us</h2>
<div class="fbbox"><div class="fb-like-box" data-href="https://www.facebook.com/LuckyNationn" data-width="500" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div></div>
<a name="products"><h2 class="meettheteam"><img src="/images/p-logo.png" height="48" width="48" border="0" />Products</h2></a>
<h2 class="meettheteam"><img src="/images/c-logo.png" height="48" width="48" border="0" />Contact</h2>
<div class="contact">Mail ons: info[at]luckynation[punt]be<br/>Bel ons: 0474 05 07 72<br/>Bezoek ons: Hulstplein 32, 8700 Tielt</div>
</div>
</div>
<div id="footer">© 2013 Louis Deconinck</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://jarallax.com/jquery-1.7.1.min.js"></script>
<script src="http://jarallax.com/download/jarallax-0.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
<script type="text/javascript">
jQuery('document').ready(function($){
$('[title]').removeAttr('title');
});
</script>
<script type="text/javascript">
init = function(){
var jarallax = new Jarallax();
}
</script>
</head>
<body onload="init()">
<a name="top"></a>
<br/>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/nl_BE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="header">
<div id="logo">
<img src="/images/logo-luckynation.png" height="48" width="48" border="0" />
<h1>Lucky Nation</h1>
</div>
</div>
<div id="content">
<div id="pijlomhoog"><a href="#top"><img src="/images/pijlomhoog.png" height="256" width="256" /></a></div>
<div id="pijlomlaag"><a href="#products"><img src="/images/pijlomlaag.png" height="256" width="256" /></a></div>
<div id="mtt">
<h2 class="meettheteam"><img src="/images/mtt-logo.png" height="48" width="48" border="0" />Meet the team</h2>
<h2 class="functie">Gedelegeerd bestuurders</h2>
<div class="thomas"><a href="#" id="Ik ben Thomas :-)<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed lorem rutrum, venenatis arcu eget, ultrices erat. Donec tellus mi, posuere consequat tincidunt eget, suscipit ut arcu. In euismod in ipsum gravida dignissim. Aenean sit amet sagittis leo. Nunc viverra sodales rutrum. Suspendisse ut felis consequat, elementum nibh et, ultrices lectus. Nulla a lectus mi. Fusce dignissim nisi non aliquam imperdiet. Donec in volutpat enim, sed molestie libero. Quisque placerat ante a bibendum fringilla. Donec eu augue et est molestie pulvinar nec sit amet orci. Etiam commodo sem vel consequat sollicitudin." class="tooltip"><h3 class="thomasnaam">Thomas</h3></a></div>
<div class="andreas"><a href="#" id="Ik ben Andreas :-)" class="tooltip"><h3 class="andreasnaam">Andreas</h3></a></div>
<h2 class="functie">Administratie</h2>
<div class="emiel"><a href="#" id="Ik ben Emiel :-)" class="tooltip"><h3 class="emielnaam">Emiel</h3></a></div>
<div class="jarik"><a href="#" id="Ik ben Jarik :-)" class="tooltip"><h3 class="jariknaam">Jarik</h3></a></div>
<h2 class="functie">Marketing</h2>
<div class="sien"><a href="#" id="Ik ben Sien :-)" class="tooltip"><h3 class="siennaam">Sien</h3></a></div>
<div class="ines"><a href="#" id="Ik ben Ines :-)" class="tooltip"><h3 class="inesnaam">Ines</h3></a></div>
<h2 class="functie">Kassa</h2>
<div class="aline"><a href="#" id="Ik ben Aline :-)" class="tooltip"><h3 class="alinenaam">Aline</h3></a></div>
<div class="nicolas"><a href="#" id="Ik ben Nicolas :-)" class="tooltip"><h3 class="nicolasnaam">Nicolas</h3></a></div>
<h2 class="functie">Boekhouding</h2>
<div class="ytse"><a href="#" id="Ik ben Ytse :-)" class="tooltip"><h3 class="ytsenaam">Ytse</h3></a></div>
<div class="brecht"><a href="#" id="Ik ben Brecht :-)" class="tooltip"><h3 class="brechtnaam">Brecht</h3></a></div>
<h2 class="functie">Techniek</h2>
<div class="louis"><a href="#" id="Ik ben Louis :-)" class="tooltip"><h3 class="louisnaam">Louis</h3></a></div>
<div class="thiemen"><a href="#" id="Ik ben Thiemen :-)" class="tooltip"><h3 class="thiemennaam">Thiemen</h3></a></div>
<h2 class="functie">Website</h2>
<div class="louis2"><a href="#" id="Ik ben Louis :-)" class="tooltip"><h3 class="louis2naam">Louis</h3></a></div>
<h2 class="functie">Onder leiding van</h2>
<div class="mvandamme"><a href="#" id="Ik bent M. Vandamme :-)" class="tooltip"><h3 class="mvandammenaam">M. Vandamme</h3></a></div>
<h2 class="meettheteam"><img src="/images/lu-logo.png" height="48" width="48" border="0" />Like us</h2>
<div class="fbbox"><div class="fb-like-box" data-href="https://www.facebook.com/LuckyNationn" data-width="500" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div></div>
<a name="products"><h2 class="meettheteam"><img src="/images/p-logo.png" height="48" width="48" border="0" />Products</h2></a>
<h2 class="meettheteam"><img src="/images/c-logo.png" height="48" width="48" border="0" />Contact</h2>
<div class="contact">Mail ons: info[at]luckynation[punt]be<br/>Bel ons: 0474 05 07 72<br/>Bezoek ons: Hulstplein 32, 8700 Tielt</div>
</div>
</div>
<div id="footer">© 2013 Louis Deconinck</div>
</body>
</html>
style.css:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
/* GOOGLE WEBFONTS IMPORTEREN */
@import url(http://fonts.googleapis.com/css?family=Lobster);
@import url(http://fonts.googleapis.com/css?family=Pacifico);
@import url(http://fonts.googleapis.com/css?family=Indie+Flower);
/* HEADER */
#logo {
position: fixed;
}
#header {
background-color: #f39c12;
height: 70px;
}
#logo img {
float:left;
}
#logo {
margin: 0px 0px 0px 50px;
padding: 10px 0px 0px 0px;
}
#logo h1 {
width: 220px;
background-color: #c0392b;
border-radius: 25px 25px 25px 25px;;
font-family: 'Lobster', cursive;
color: #ffffff;
font-size: 36px;
margin: 0px 0px 0px 55px;
padding: 0px 0px 5px 25px;
}
/* CONTENT */
#content {
width: 800px;
margin: 0 auto;
}
/* MEET THE TEAM */
.meettheteam {
font-family: 'Pacifico', cursive;
color: #c0392b;
font-size: 54px;
}
.meettheteam img {
margin-right: 10px;
}
#mtt h3 {
font-family: 'Indie Flower', cursive;
}
.functie {
text-align: center;
font-family: 'Indie Flower', cursive;
font-size: 25px;
}
.thomas, .emiel, .sien, .aline, .ytse, .louis {
border-radius: 75px;
opacity: 0.5;
height: 175px;
width: 150px;
display: block;
margin: 0px 0px 0px 200px;
}
.andreas, .jarik, .ines, .nicolas, .brecht, .thiemen {
border-radius: 75px;
opacity: 0.5;
height: 175px;
width: 150px;
display: block;
margin: -194px 0px 0px 450px;
}
.louis2, .mvandamme {
border-radius: 75px;
opacity: 0.5;
height: 175px;
width: 150px;
display: block;
margin: 0px 0px 0px 325px;
}
.thomas {
background: url(/images/thomas-profiel.png) no-repeat;
}
.andreas {
background: url(/images/andreas-profiel.png) no-repeat;
}
.emiel {
background: url(/images/emiel-profiel.png) no-repeat;
}
.jarik {
background: url(/images/jarik-profiel.png) no-repeat;
}
.sien {
background: url(/images/sien-profiel.png) no-repeat;
}
.ines {
background: url(/images/ines-profiel.png) no-repeat;
}
.aline {
background: url(/images/aline-profiel.png) no-repeat;
}
.nicolas {
background: url(/images/nicolas-profiel.png) no-repeat;
}
.jarik {
background: url(/images/jarik-profiel.png) no-repeat;
}
.ytse {
background: url(/images/ytse-profiel.png) no-repeat;
}
.brecht {
background: url(/images/brecht-profiel.png) no-repeat;
}
.louis, .louis2 {
background: url(/images/louis-profiel.png) no-repeat;
}
.thiemen {
background: url(/images/thiemen-profiel.png) no-repeat;
}
.mvandamme {
background: url(/images/martien-profiel.png) no-repeat;
}
.thomasnaam, .andreasnaam, .emielnaam, .jariknaam, .siennaam, .inesnaam, .nicolasnaam, .alinenaam, .ytsenaam, .brechtnaam, .thiemennaam, .louisnaam, .louis2naam, .mvandammenaam {
text-align: center;
padding-top: 150px;
}
.thomas, .emiel, .sien, .aline, .ytse, .louis, .andreas, .jarik, .ines, .nicolas, .brecht, .thiemen, .louis2, .mvandamme {
moz-transition:width 2s, height 2s, background-color 2s, color 2s, -moz-transform 2s;
-webkit-transition:width 2s, height 2s, background-color 2s, color 2s, -webkit-transform 2s;
-o-transition:width 2s, height 2s, background-color 2s, color 2s, -o-transform 2s;
transition:width 2s, height 2s, background-color 2s, color 2s, transform 2s;
}
.thomas:hover, .andreas:hover, .emiel:hover, .jarik:hover, .sien:hover, .ines:hover, .nicolas:hover, .aline:hover, .ytse:hover, .brecht:hover, .thiemen:hover, .louis:hover, .louis2:hover, .mvandamme:hover {
opacity: 1;
width:180px;
height:180px;
background-color: #c0392b;
color: #fff;
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
.fbbox {
text-align: center;
}
.contact {
font-family: 'Indie Flower', cursive;
font-size: 25px;
}
#pijlomhoog {
opacity: 0.5;
position: fixed;
margin-top: 100px;
margin-left: 750px;
width: 256px;
height: 256px;
}
#pijlomlaag {
opacity: 0.5;
position: fixed;
margin-top: 356px;
margin-left: 750px;
width: 256px;
height: 256px;
}
#pijlomhoog:hover, #pijlomlaag:hover {
opacity: 1;
}
#footer {
background-color: #f39c12;
height: 35px;
margin-top: 50px;
padding-top: 2px;
padding-left: 10px;
margin-bottom: 15px;
font-family: 'Lobster', cursive;
color: #ffffff;
font-size: 24px;
}
.tooltip {
display: inline;
position: relative;
text-decoration: none;
color: #000000;
moz-transition:width 2s, height 2s, background-color 2s, color 2s, -moz-transform 2s;
-webkit-transition:width 2s, height 2s, background-color 2s, color 2s, -webkit-transform 2s;
-o-transition:width 2s, height 2s, background-color 2s, color 2s, -o-transform 2s;
transition: transform 2s step-end;
}
.thomas .tooltip:hover:after {
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
background: #c0392b;
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(id);
left: 0%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 350px;
margin-left: -420px;
}
.andreas .tooltip:hover:after {
background: #c0392b;
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(id);
left: 0%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 350px;
margin-left: -670px;
}
@import url(http://fonts.googleapis.com/css?family=Lobster);
@import url(http://fonts.googleapis.com/css?family=Pacifico);
@import url(http://fonts.googleapis.com/css?family=Indie+Flower);
/* HEADER */
#logo {
position: fixed;
}
#header {
background-color: #f39c12;
height: 70px;
}
#logo img {
float:left;
}
#logo {
margin: 0px 0px 0px 50px;
padding: 10px 0px 0px 0px;
}
#logo h1 {
width: 220px;
background-color: #c0392b;
border-radius: 25px 25px 25px 25px;;
font-family: 'Lobster', cursive;
color: #ffffff;
font-size: 36px;
margin: 0px 0px 0px 55px;
padding: 0px 0px 5px 25px;
}
/* CONTENT */
#content {
width: 800px;
margin: 0 auto;
}
/* MEET THE TEAM */
.meettheteam {
font-family: 'Pacifico', cursive;
color: #c0392b;
font-size: 54px;
}
.meettheteam img {
margin-right: 10px;
}
#mtt h3 {
font-family: 'Indie Flower', cursive;
}
.functie {
text-align: center;
font-family: 'Indie Flower', cursive;
font-size: 25px;
}
.thomas, .emiel, .sien, .aline, .ytse, .louis {
border-radius: 75px;
opacity: 0.5;
height: 175px;
width: 150px;
display: block;
margin: 0px 0px 0px 200px;
}
.andreas, .jarik, .ines, .nicolas, .brecht, .thiemen {
border-radius: 75px;
opacity: 0.5;
height: 175px;
width: 150px;
display: block;
margin: -194px 0px 0px 450px;
}
.louis2, .mvandamme {
border-radius: 75px;
opacity: 0.5;
height: 175px;
width: 150px;
display: block;
margin: 0px 0px 0px 325px;
}
.thomas {
background: url(/images/thomas-profiel.png) no-repeat;
}
.andreas {
background: url(/images/andreas-profiel.png) no-repeat;
}
.emiel {
background: url(/images/emiel-profiel.png) no-repeat;
}
.jarik {
background: url(/images/jarik-profiel.png) no-repeat;
}
.sien {
background: url(/images/sien-profiel.png) no-repeat;
}
.ines {
background: url(/images/ines-profiel.png) no-repeat;
}
.aline {
background: url(/images/aline-profiel.png) no-repeat;
}
.nicolas {
background: url(/images/nicolas-profiel.png) no-repeat;
}
.jarik {
background: url(/images/jarik-profiel.png) no-repeat;
}
.ytse {
background: url(/images/ytse-profiel.png) no-repeat;
}
.brecht {
background: url(/images/brecht-profiel.png) no-repeat;
}
.louis, .louis2 {
background: url(/images/louis-profiel.png) no-repeat;
}
.thiemen {
background: url(/images/thiemen-profiel.png) no-repeat;
}
.mvandamme {
background: url(/images/martien-profiel.png) no-repeat;
}
.thomasnaam, .andreasnaam, .emielnaam, .jariknaam, .siennaam, .inesnaam, .nicolasnaam, .alinenaam, .ytsenaam, .brechtnaam, .thiemennaam, .louisnaam, .louis2naam, .mvandammenaam {
text-align: center;
padding-top: 150px;
}
.thomas, .emiel, .sien, .aline, .ytse, .louis, .andreas, .jarik, .ines, .nicolas, .brecht, .thiemen, .louis2, .mvandamme {
moz-transition:width 2s, height 2s, background-color 2s, color 2s, -moz-transform 2s;
-webkit-transition:width 2s, height 2s, background-color 2s, color 2s, -webkit-transform 2s;
-o-transition:width 2s, height 2s, background-color 2s, color 2s, -o-transform 2s;
transition:width 2s, height 2s, background-color 2s, color 2s, transform 2s;
}
.thomas:hover, .andreas:hover, .emiel:hover, .jarik:hover, .sien:hover, .ines:hover, .nicolas:hover, .aline:hover, .ytse:hover, .brecht:hover, .thiemen:hover, .louis:hover, .louis2:hover, .mvandamme:hover {
opacity: 1;
width:180px;
height:180px;
background-color: #c0392b;
color: #fff;
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
.fbbox {
text-align: center;
}
.contact {
font-family: 'Indie Flower', cursive;
font-size: 25px;
}
#pijlomhoog {
opacity: 0.5;
position: fixed;
margin-top: 100px;
margin-left: 750px;
width: 256px;
height: 256px;
}
#pijlomlaag {
opacity: 0.5;
position: fixed;
margin-top: 356px;
margin-left: 750px;
width: 256px;
height: 256px;
}
#pijlomhoog:hover, #pijlomlaag:hover {
opacity: 1;
}
#footer {
background-color: #f39c12;
height: 35px;
margin-top: 50px;
padding-top: 2px;
padding-left: 10px;
margin-bottom: 15px;
font-family: 'Lobster', cursive;
color: #ffffff;
font-size: 24px;
}
.tooltip {
display: inline;
position: relative;
text-decoration: none;
color: #000000;
moz-transition:width 2s, height 2s, background-color 2s, color 2s, -moz-transform 2s;
-webkit-transition:width 2s, height 2s, background-color 2s, color 2s, -webkit-transform 2s;
-o-transition:width 2s, height 2s, background-color 2s, color 2s, -o-transform 2s;
transition: transform 2s step-end;
}
.thomas .tooltip:hover:after {
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
background: #c0392b;
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(id);
left: 0%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 350px;
margin-left: -420px;
}
.andreas .tooltip:hover:after {
background: #c0392b;
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(id);
left: 0%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 350px;
margin-left: -670px;
}
Ik zou wel wat dingen veranderen.
Je gebruikt dingen niet waarvoor ze dienen.
Vooral dan id en class; die moet je beter gebruiken.
Als het uniek is, gebruik dan id.
Als het een eigenschap is die meerdere elementen verbindt, gebruik dan class.
Maak ook beter gebruik van overerving.
bv. bij mij zou thomas er zo uit zien:
Code (php)
1
2
3
4
5
2
3
4
5
<div id="thomas" class="team">
<a href="#" class="tooltip" data-tooltip="Ik ben Thomas :-)<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed lorem rutrum, venenatis arcu eget, ultrices erat. Donec tellus mi, posuere consequat tincidunt eget, suscipit ut arcu. In euismod in ipsum gravida dignissim. Aenean sit amet sagittis leo. Nunc viverra sodales rutrum. Suspendisse ut felis consequat, elementum nibh et, ultrices lectus. Nulla a lectus mi. Fusce dignissim nisi non aliquam imperdiet. Donec in volutpat enim, sed molestie libero. Quisque placerat ante a bibendum fringilla. Donec eu augue et est molestie pulvinar nec sit amet orci. Etiam commodo sem vel consequat sollicitudin.">
<h3>Thomas</h3>
</a>
</div>
<a href="#" class="tooltip" data-tooltip="Ik ben Thomas :-)<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed lorem rutrum, venenatis arcu eget, ultrices erat. Donec tellus mi, posuere consequat tincidunt eget, suscipit ut arcu. In euismod in ipsum gravida dignissim. Aenean sit amet sagittis leo. Nunc viverra sodales rutrum. Suspendisse ut felis consequat, elementum nibh et, ultrices lectus. Nulla a lectus mi. Fusce dignissim nisi non aliquam imperdiet. Donec in volutpat enim, sed molestie libero. Quisque placerat ante a bibendum fringilla. Donec eu augue et est molestie pulvinar nec sit amet orci. Etiam commodo sem vel consequat sollicitudin.">
<h3>Thomas</h3>
</a>
</div>
Zo kan je al je teamleden in 1 keer aanspreken met .team (in plaats van bv. '.thomas, .emiel, .sien, .aline, .ytse, .louis, .andreas, .jarik, ...')
bv. die <h3> wordt dan .team h3
Let er ook op: ik zet die tooltip data in data-tooltip . Met deze data- constructie kan je op een veilige manier gelijk welke data plakken aan een HTML element, zonder dat dat stoort.
Met jQuery kan je die dan opvragen met
$(this).data('tooltip').
----
Ik zal je een voorbeeld schrijven van hoe dit op een betere manier kan.
De issues:
Algemeen
- Emiel en Nicolas zijn verdwenen + Jarik staat over Andreas
- Bij transition verandert de background-color niet
- De tooltip verschijnt niet bij hover
Browsergerelateerd:
- In IE10 werken de transitions niet
- In IE + FireFox toont de fbbox geen gezichtjes
index.php:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- LINKEN NAAR STYLESHEET -->
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- JQUERY IMPORTEREN -->
<script src="http://jarallax.com/jquery-1.7.1.min.js"></script>
<!-- MOOIER SCROLLEN MET PIJLENNAVIGATIE -->
<script type="text/javascript">
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
</head>
<!-- BEGIN BODY -->
<body>
<!-- TOPANKER VOOR PIJLENNAVIGATIE -->
<a name="top"></a>
<br/>
<!-- BEGIN HEADER -->
<div id="header">
<div id="logo">
<img src="/images/logo-luckynation.png" height="48" width="48" border="0" />
<h1>Lucky Nation</h1>
</div>
</div>
<!-- BEGIN CONTENT -->
<div id="content">
<!-- PIJLENNAVIGATIE -->
<div id="pijlomhoog"><a href="#top"><img src="/images/pijlomhoog.png" height="256" width="256" /></a></div>
<div id="pijlomlaag"><a href="#products"><img src="/images/pijlomlaag.png" height="256" width="256" /></a></div>
<div id="mtt">
<!-- TEAMMEMBERS -->
<h2 class="meettheteam"><img src="/images/mtt-logo.png" height="48" width="48" border="0" />Meet the team</h2>
<h2 class="functie">Gedelegeerd bestuurders</h2>
<div id="thomas" class="teaml"><a href="#" data-tooltip="Ik ben Thomas :-)<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit." class="tooltip"><h3>Thomas</h3></a></div>
<div id="andreas" class="teamr"><a href="#" data-tooltip="Ik ben Andreas :-)" class="tooltip"><h3>Andreas</h3></a></div>
<h2 class="functie">Administratie</h2>
<div id="emiel class="teaml"><a href="#" data-tooltip="tooltip" class="tooltip"><h3>Emiel</h3></a></div>
<div id="jarik" class="teamr"><a href="#" data-tooltip="tooltip" class="tooltip"><h3>Jarik</h3></a></div>
<h2 class="functie">Marketing</h2>
<div id="sien" class="teaml"><a href="#" data-tooltip="Ik ben Sien :-)" class="tooltip"><h3>Sien</h3></a></div>
<div id="ines" class="teamr"><a href="#" data-tooltip="Ik ben Ines :-)" class="tooltip"><h3>Ines</h3></a></div>
<h2 class="functie">Kassa</h2>
<div id="aline" class="teaml"><a href="#" data-tooltip="Ik ben Aline :-)" class="tooltip"><h3>Aline</h3></a></div>
<div id="nicolas" class="teamr"><a href="#" data-tooltip="Ik ben Nicolas :-)" class="tooltip"><h3>Nicolas</h3></a></div>
<h2 class="functie">Boekhouding</h2>
<div id="ytse" class="teaml"><a href="#" data-tooltip="Ik ben Ytse :-)" class="tooltip"><h3>Ytse</h3></a></div>
<div id="brecht" class="teamr"><a href="#" data-tooltip="Ik ben Brecht :-)" class="tooltip"><h3>Brecht</h3></a></div>
<h2 class="functie">Techniek</h2>
<div id="louis" class="teaml"><a href="#" data-tooltip="Ik ben Louis :-)" class="tooltip"><h3>Louis</h3></a></div>
<div id="thiemen" class="teamr"><a href="#" data-tooltip="hallo" class="tooltip"><h3>Thiemen</h3></a></div>
<h2 class="functie">Website</h2>
<div id="louis2" class="teamm"><a href="#" data-tooltip="Ik ben Louis :-)" class="tooltip"><h3>Louis</h3></a></div>
<h2 class="functie">Onder leiding van</h2>
<div id="mvandamme class="teamm"><a href="#" data-tooltip="Ik bent M. Vandamme :-)" class="tooltip"><h3>M. Vandamme</h3></a></div>
<!-- FB LIKEBOX -->
<h2 class="meettheteam"><img src="/images/lu-logo.png" height="48" width="48" border="0" />Like us</h2>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fluckynationn&width=600&height=258&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:600px; height:258px;" allowTransparency="true"></iframe>
<!-- PRODUCTS -->
<a name="products"><h2 class="meettheteam"><img src="/images/p-logo.png" height="48" width="48" border="0" />Products</h2></a>
<!-- CONTACT -->
<h2 class="meettheteam"><img src="/images/c-logo.png" height="48" width="48" border="0" />Contact</h2>
<div class="contact">Mail ons: info[at]luckynation[punt]be<br/>Bel ons: 0474 05 07 72<br/>Bezoek ons: Hulstplein 32, 8700 Tielt</div>
</div>
</div>
<!-- FOOTER -->
<div id="footer">© 2013 Louis Deconinck</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- LINKEN NAAR STYLESHEET -->
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- JQUERY IMPORTEREN -->
<script src="http://jarallax.com/jquery-1.7.1.min.js"></script>
<!-- MOOIER SCROLLEN MET PIJLENNAVIGATIE -->
<script type="text/javascript">
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
</head>
<!-- BEGIN BODY -->
<body>
<!-- TOPANKER VOOR PIJLENNAVIGATIE -->
<a name="top"></a>
<br/>
<!-- BEGIN HEADER -->
<div id="header">
<div id="logo">
<img src="/images/logo-luckynation.png" height="48" width="48" border="0" />
<h1>Lucky Nation</h1>
</div>
</div>
<!-- BEGIN CONTENT -->
<div id="content">
<!-- PIJLENNAVIGATIE -->
<div id="pijlomhoog"><a href="#top"><img src="/images/pijlomhoog.png" height="256" width="256" /></a></div>
<div id="pijlomlaag"><a href="#products"><img src="/images/pijlomlaag.png" height="256" width="256" /></a></div>
<div id="mtt">
<!-- TEAMMEMBERS -->
<h2 class="meettheteam"><img src="/images/mtt-logo.png" height="48" width="48" border="0" />Meet the team</h2>
<h2 class="functie">Gedelegeerd bestuurders</h2>
<div id="thomas" class="teaml"><a href="#" data-tooltip="Ik ben Thomas :-)<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit." class="tooltip"><h3>Thomas</h3></a></div>
<div id="andreas" class="teamr"><a href="#" data-tooltip="Ik ben Andreas :-)" class="tooltip"><h3>Andreas</h3></a></div>
<h2 class="functie">Administratie</h2>
<div id="emiel class="teaml"><a href="#" data-tooltip="tooltip" class="tooltip"><h3>Emiel</h3></a></div>
<div id="jarik" class="teamr"><a href="#" data-tooltip="tooltip" class="tooltip"><h3>Jarik</h3></a></div>
<h2 class="functie">Marketing</h2>
<div id="sien" class="teaml"><a href="#" data-tooltip="Ik ben Sien :-)" class="tooltip"><h3>Sien</h3></a></div>
<div id="ines" class="teamr"><a href="#" data-tooltip="Ik ben Ines :-)" class="tooltip"><h3>Ines</h3></a></div>
<h2 class="functie">Kassa</h2>
<div id="aline" class="teaml"><a href="#" data-tooltip="Ik ben Aline :-)" class="tooltip"><h3>Aline</h3></a></div>
<div id="nicolas" class="teamr"><a href="#" data-tooltip="Ik ben Nicolas :-)" class="tooltip"><h3>Nicolas</h3></a></div>
<h2 class="functie">Boekhouding</h2>
<div id="ytse" class="teaml"><a href="#" data-tooltip="Ik ben Ytse :-)" class="tooltip"><h3>Ytse</h3></a></div>
<div id="brecht" class="teamr"><a href="#" data-tooltip="Ik ben Brecht :-)" class="tooltip"><h3>Brecht</h3></a></div>
<h2 class="functie">Techniek</h2>
<div id="louis" class="teaml"><a href="#" data-tooltip="Ik ben Louis :-)" class="tooltip"><h3>Louis</h3></a></div>
<div id="thiemen" class="teamr"><a href="#" data-tooltip="hallo" class="tooltip"><h3>Thiemen</h3></a></div>
<h2 class="functie">Website</h2>
<div id="louis2" class="teamm"><a href="#" data-tooltip="Ik ben Louis :-)" class="tooltip"><h3>Louis</h3></a></div>
<h2 class="functie">Onder leiding van</h2>
<div id="mvandamme class="teamm"><a href="#" data-tooltip="Ik bent M. Vandamme :-)" class="tooltip"><h3>M. Vandamme</h3></a></div>
<!-- FB LIKEBOX -->
<h2 class="meettheteam"><img src="/images/lu-logo.png" height="48" width="48" border="0" />Like us</h2>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fluckynationn&width=600&height=258&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:600px; height:258px;" allowTransparency="true"></iframe>
<!-- PRODUCTS -->
<a name="products"><h2 class="meettheteam"><img src="/images/p-logo.png" height="48" width="48" border="0" />Products</h2></a>
<!-- CONTACT -->
<h2 class="meettheteam"><img src="/images/c-logo.png" height="48" width="48" border="0" />Contact</h2>
<div class="contact">Mail ons: info[at]luckynation[punt]be<br/>Bel ons: 0474 05 07 72<br/>Bezoek ons: Hulstplein 32, 8700 Tielt</div>
</div>
</div>
<!-- FOOTER -->
<div id="footer">© 2013 Louis Deconinck</div>
</body>
</html>
style.css:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
/* GOOGLE WEBFONTS IMPORTEREN */
@import url(http://fonts.googleapis.com/css?family=Lobster);
@import url(http://fonts.googleapis.com/css?family=Pacifico);
@import url(http://fonts.googleapis.com/css?family=Indie+Flower);
/* HEADER */
a img {
border:none;
}
#logo {
position: fixed;
}
#header {
background-color: #f39c12;
height: 70px;
}
/* LOGO */
#logo img {
float:left;
}
#logo {
margin: 0px 0px 0px 50px;
padding: 10px 0px 0px 0px;
}
#logo h1 {
width: 220px;
background-color: #c0392b;
border-radius: 25px 25px 25px 25px;;
font-family: 'Lobster', cursive;
color: #ffffff;
font-size: 36px;
margin: 0px 0px 0px 55px;
padding: 0px 0px 5px 25px;
}
/* CONTENT */
#content {
width: 800px;
margin: 0 auto;
}
/* MEET THE TEAM */
.meettheteam {
font-family: 'Pacifico', cursive;
color: #c0392b;
font-size: 54px;
}
.meettheteam img {
margin-right: 10px;
}
#mtt h3 {
font-family: 'Indie Flower', cursive;
}
/* FUNCTIE TITEL */
.functie {
text-align: center;
font-family: 'Indie Flower', cursive;
font-size: 25px;
}
/* PROFIELFOTO OPMAAK */
.teaml, .teamr, .teamm {
border-radius: 75px;
opacity: 0.5;
height: 175px;
width: 150px;
display: block;
margin: 0px 0px 0px 200px;
}
.teaml {margin: 0px 0px 0px 200px;}.teamr {margin: -194px 0px 0px 450px;}.teamm {margin: 0px 0px 0px 325px;}
/* PROFIELFOTOS */
#thomas {background: url(/images/thomas-profiel.png) no-repeat;}#andreas {background: url(/images/andreas-profiel.png) no-repeat;}#emiel {background: url(/images/emiel-profiel.png) no-repeat;}#jarik {background: url(/images/jarik-profiel.png) no-repeat;}#sien {background: url(/images/sien-profiel.png) no-repeat;}#ines {background: url(/images/ines-profiel.png) no-repeat;}#aline {background: url(/images/aline-profiel.png) no-repeat;}.nicolas {background: url(/images/nicolas-profiel.png) no-repeat;}#jarik {background: url(/images/jarik-profiel.png) no-repeat;}#ytse {background: url(/images/ytse-profiel.png) no-repeat;}#brecht {background: url(/images/brecht-profiel.png) no-repeat;}#louis, #louis2 {background: url(/images/louis-profiel.png) no-repeat;}#thiemen {background: url(/images/thiemen-profiel.png) no-repeat;}#mvandamme {background: url(/images/martien-profiel.png) no-repeat;}
/* PLAATS NAAM */
.teaml h3, .teamr h3, .teamm h3 {
text-align: center;
padding-top: 150px;
}
/* PROFIELFOTO TRANSITIONS */
.teaml, .teamr, .teamm {
-moz-transition:width 2s, height 2s, background-color 2s, color 2s, -moz-transform 2s;
-webkit-transition:width 2s, height 2s, background-color 2s, color 2s, -webkit-transform 2s;
-o-transition:width 2s, height 2s, background-color 2s, color 2s, -o-transform 2s;
transition:width 2s, height 2s, background-color 2s, color 2s, transform 2s;
}
.teaml:hover, .teamr:hover, .teamm:hover {
opacity: 1;
width:180px;
height:180px;
background-color: #f39c12;
color: #ffffff;
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
/* FACEBOOKBOX */
.fbbox {
text-align: center;
}
/* CONTACT */
.contact {
font-family: 'Indie Flower', cursive;
font-size: 25px;
}
/* PIJLENNAVIGATIE */
#pijlomhoog {
opacity: 0.5;
position: fixed;
margin-top: 100px;
margin-left: 750px;
width: 256px;
height: 256px;
}
#pijlomlaag {
opacity: 0.5;
position: fixed;
margin-top: 356px;
margin-left: 750px;
width: 256px;
height: 256px;
}
#pijlomhoog:hover, #pijlomlaag:hover {
opacity: 1;
}
/* FOOTER */
#footer {
background-color: #f39c12;
height: 35px;
margin-top: 50px;
padding-top: 2px;
padding-left: 10px;
margin-bottom: 15px;
font-family: 'Lobster', cursive;
color: #ffffff;
font-size: 24px;
}
/* TOOLTIP */
.tooltip {
display: inline;
position: relative;
text-decoration: none;
color: #000000;
opacity: 0;
}
/* TOOLTIP HOVER */
.teaml .tooltip:hover:after, .teamr .tooltip:hover:after, .teamm .tooltip:hover:after {
opacity: 1;
background: #c0392b;
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(data-tooltip);
left: 0%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 350px;
}
/* PLAATS TOOLTIP */
.teaml .tooltip:hover:after {margin-left: -420px;}.teamr .tooltip:hover:after {margin-left: -670px;}.teamm .tooltip:hover:after {margin-left: -545px;}
@import url(http://fonts.googleapis.com/css?family=Lobster);
@import url(http://fonts.googleapis.com/css?family=Pacifico);
@import url(http://fonts.googleapis.com/css?family=Indie+Flower);
/* HEADER */
a img {
border:none;
}
#logo {
position: fixed;
}
#header {
background-color: #f39c12;
height: 70px;
}
/* LOGO */
#logo img {
float:left;
}
#logo {
margin: 0px 0px 0px 50px;
padding: 10px 0px 0px 0px;
}
#logo h1 {
width: 220px;
background-color: #c0392b;
border-radius: 25px 25px 25px 25px;;
font-family: 'Lobster', cursive;
color: #ffffff;
font-size: 36px;
margin: 0px 0px 0px 55px;
padding: 0px 0px 5px 25px;
}
/* CONTENT */
#content {
width: 800px;
margin: 0 auto;
}
/* MEET THE TEAM */
.meettheteam {
font-family: 'Pacifico', cursive;
color: #c0392b;
font-size: 54px;
}
.meettheteam img {
margin-right: 10px;
}
#mtt h3 {
font-family: 'Indie Flower', cursive;
}
/* FUNCTIE TITEL */
.functie {
text-align: center;
font-family: 'Indie Flower', cursive;
font-size: 25px;
}
/* PROFIELFOTO OPMAAK */
.teaml, .teamr, .teamm {
border-radius: 75px;
opacity: 0.5;
height: 175px;
width: 150px;
display: block;
margin: 0px 0px 0px 200px;
}
.teaml {margin: 0px 0px 0px 200px;}.teamr {margin: -194px 0px 0px 450px;}.teamm {margin: 0px 0px 0px 325px;}
/* PROFIELFOTOS */
#thomas {background: url(/images/thomas-profiel.png) no-repeat;}#andreas {background: url(/images/andreas-profiel.png) no-repeat;}#emiel {background: url(/images/emiel-profiel.png) no-repeat;}#jarik {background: url(/images/jarik-profiel.png) no-repeat;}#sien {background: url(/images/sien-profiel.png) no-repeat;}#ines {background: url(/images/ines-profiel.png) no-repeat;}#aline {background: url(/images/aline-profiel.png) no-repeat;}.nicolas {background: url(/images/nicolas-profiel.png) no-repeat;}#jarik {background: url(/images/jarik-profiel.png) no-repeat;}#ytse {background: url(/images/ytse-profiel.png) no-repeat;}#brecht {background: url(/images/brecht-profiel.png) no-repeat;}#louis, #louis2 {background: url(/images/louis-profiel.png) no-repeat;}#thiemen {background: url(/images/thiemen-profiel.png) no-repeat;}#mvandamme {background: url(/images/martien-profiel.png) no-repeat;}
/* PLAATS NAAM */
.teaml h3, .teamr h3, .teamm h3 {
text-align: center;
padding-top: 150px;
}
/* PROFIELFOTO TRANSITIONS */
.teaml, .teamr, .teamm {
-moz-transition:width 2s, height 2s, background-color 2s, color 2s, -moz-transform 2s;
-webkit-transition:width 2s, height 2s, background-color 2s, color 2s, -webkit-transform 2s;
-o-transition:width 2s, height 2s, background-color 2s, color 2s, -o-transform 2s;
transition:width 2s, height 2s, background-color 2s, color 2s, transform 2s;
}
.teaml:hover, .teamr:hover, .teamm:hover {
opacity: 1;
width:180px;
height:180px;
background-color: #f39c12;
color: #ffffff;
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
/* FACEBOOKBOX */
.fbbox {
text-align: center;
}
/* CONTACT */
.contact {
font-family: 'Indie Flower', cursive;
font-size: 25px;
}
/* PIJLENNAVIGATIE */
#pijlomhoog {
opacity: 0.5;
position: fixed;
margin-top: 100px;
margin-left: 750px;
width: 256px;
height: 256px;
}
#pijlomlaag {
opacity: 0.5;
position: fixed;
margin-top: 356px;
margin-left: 750px;
width: 256px;
height: 256px;
}
#pijlomhoog:hover, #pijlomlaag:hover {
opacity: 1;
}
/* FOOTER */
#footer {
background-color: #f39c12;
height: 35px;
margin-top: 50px;
padding-top: 2px;
padding-left: 10px;
margin-bottom: 15px;
font-family: 'Lobster', cursive;
color: #ffffff;
font-size: 24px;
}
/* TOOLTIP */
.tooltip {
display: inline;
position: relative;
text-decoration: none;
color: #000000;
opacity: 0;
}
/* TOOLTIP HOVER */
.teaml .tooltip:hover:after, .teamr .tooltip:hover:after, .teamm .tooltip:hover:after {
opacity: 1;
background: #c0392b;
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(data-tooltip);
left: 0%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 350px;
}
/* PLAATS TOOLTIP */
.teaml .tooltip:hover:after {margin-left: -420px;}.teamr .tooltip:hover:after {margin-left: -670px;}.teamm .tooltip:hover:after {margin-left: -545px;}
Jullie hulp betekent zeer veel voor mij, dus alle hulp is welkom :-)
Alvast bedankt
Louis