Salut à tous, j'aimerais faire une simple fade in et out entre 2 images. Facile à mettre en place avec le CSS3 en changeant l'opacité mais le probleme c'est que mes images comportent de la transparence donc on voit à travers... Ce que j'aimerais c'est que lorsque je survole l'image en avant plan elle fade out et que l'autre fade-in...J'ai essayé ca :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 <div id="cf"> <img id="bottom" src="img/changVersionENG.png" /> <img id="top" src="img/versionFR2.png" /> </div>sauf que le code ne tient pas compte de mon
Code : 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 #cf { position:relative; height:185px; width:128px; margin:0 auto; } #cf img { position:absolute; left:0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } #cf img#bottom{ opacity:0; } #cf img#bottom:hover{ opacity:1; } #cf img#top:hover { opacity:0; }(à mon avis pcq l'image est caché derrière la premiere)
Code : Sélectionner tout - Visualiser dans une fenêtre à part #cf img#bottom:hover{
J'ai testé avec du javascript en cachant l'élément derrière puis le fesant apparaitre avec un mouseOver/mouseOut mais c'est un peu brusque et il doit y avoir plus simple que d'utiliser du javascript.
Quelqu'un aurait une idée ?
Partager