Bonjour tout le monde!

Je suis en train d'intégré une page d'attente pour un client et je me retrouve bloqué!
Voici mon problème :
La page d'attente ne doit contenir que le logo..
Seulement le logo est grand en hauteur, et mon client voudrais découper le logo en plusieur parti, ne garder que la parti basse visible en permanence, puis lorsque l'on passe la souris sur cette parti basse, tout le reste du logo apparaisse progressivement, comme un batiment qui se construit!

Ce que j'ai alors essayer, pour éviter le flash, c'est d'utilisé la propriété CSS3 Opacity ainsi que les propriété transition-duration et transition-delay!

Pour etre plus claire voici mon code html :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
<div class="contenu">
<img class="logo4" src="logo_4.jpg" />
<img class="logo3" src="logo_3.jpg" />
<img class="logo2" src="logo_2.jpg" />
<img class="logo1" src="logo_1.jpg" />
<img class="logo" src="logo.jpg"/>
</div>
et voici ma CSS :

Code css : Sélectionner tout - Visualiser dans une fenêtre à part
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
.contenu {
width:1000px;
margin:0 auto 0 auto;	
}
 
.logo1 {
display:block;
width:207px;
margin:0 auto;	
opacity:0.1;
transition-property: opacity;
transition-duration: 2s;
transition-delay: 1s;
}
 
.logo2 {
display:block;
width:207px;
margin:0 auto;	
opacity:0.1;
transition-property: opacity;
transition-duration: 2s;
transition-delay: 2s;
}
.logo3 {
display:block;
width:207px;
margin:0 auto;	
opacity:0.1;
transition-property: opacity;
transition-duration: 2s;
transition-delay: 3s;
}
.logo4 {
display:block;
width:207px;
margin:0 auto;	
opacity:0.1;
transition-property: opacity;
transition-duration: 2s;
transition-delay: 4s;
}
 
.logo:hover .logo1 .logo2 .logo3 .logo4 {
opacity:1;
}

Cela ne fonctionne pas, j'ai essayer beaucoup de choses, mais en vain!
Quelqu'un aurait-il une solution? même en java!

D'avance merci