Bonjour,
J'ai essayé récemment de faire une transition CSS3 afin qu'en rollover, une image devienne transparente, laissant une autre image derrière apparaître à la place... j'ai même trouvé un tuto (j'ai perdu le lien, erf) qui montrait ce code... mais autre part sur le net j'avais lu que ça ne fonctionnait pas... du coup ?
Concrètement pour mon exemple, j'ai un script js qui permet en rollover d'afficher une autre image sur une transition d'une durée donnée. Je voulais le remplacer par du CSS avec un sprite notamment.
Je saurais pas trop expliquer mon exemple, mais déjà, concernant cette question, est-ce qu'une transition sur l'opacité d'une image fonctionne ? Si oui, pouvez-vous me donner un code approprié ou me dire pourquoi mon code suivant ne marche pas :
Ça me fait le changement de position et le changement d'opacité, mais le changement d'opacité est instantané. Ah, et je fais cet essai sous chrome, donc j'ai pas mis de -moz- ou autre.
Modifié par LightBen (05 Jan 2012 - 15:36)
J'ai essayé récemment de faire une transition CSS3 afin qu'en rollover, une image devienne transparente, laissant une autre image derrière apparaître à la place... j'ai même trouvé un tuto (j'ai perdu le lien, erf) qui montrait ce code... mais autre part sur le net j'avais lu que ça ne fonctionnait pas... du coup ?
Concrètement pour mon exemple, j'ai un script js qui permet en rollover d'afficher une autre image sur une transition d'une durée donnée. Je voulais le remplacer par du CSS avec un sprite notamment.
Je saurais pas trop expliquer mon exemple, mais déjà, concernant cette question, est-ce qu'une transition sur l'opacité d'une image fonctionne ? Si oui, pouvez-vous me donner un code approprié ou me dire pourquoi mon code suivant ne marche pas :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Document sans nom</title>
<style>
.sprite { margin-top:0; opacity:1.0; -webkit-transition-property: opacity 1s linear; transition: opacity 1s linear; }
.sprite:hover { margin-top:10px; opacity:0.5; -webkit-transition-property: opacity 1s linear; transition: opacity 1s linear; }
</style>
</head>
<body>
<img class="sprite" src="images/index-mezouza-tefiline.png" alt="" />
</body>
</html>
Ça me fait le changement de position et le changement d'opacité, mais le changement d'opacité est instantané. Ah, et je fais cet essai sous chrome, donc j'ai pas mis de -moz- ou autre.
Modifié par LightBen (05 Jan 2012 - 15:36)
