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>
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;
	}
sauf que le code ne tient pas compte de mon (à mon avis pcq l'image est caché derrière la premiere)

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 ?