Discussion :

[Karly]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 #cf img#bottom:hover{

(à 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 ?

[Invité]

Bonjour,
remplacer par :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#cf:hover img#bottom{
	opacity:1;
}
#cf:hover img#top {
	opacity:0;
}