Bonjour à tous,

Je cherche sans trouver de solutions à mon problème. J’ai un logo sous forme de gif animé de couleur noir. Je souhaite qu’au passage de la souris ce gif animé soit d’une autre couleur. Je ne peux pas faire de gif animé transparent et jouer avec un background-color à cause de la forme du gif.

J’ai donc fait deux gifs de couleurs différentes que j’ai superposés dans mon fichier css en utilisant les fonctions z-index et hover, les gifs en background-image. Le second gif animé remplace bien le premier. Par contre il ne se lance pas au même moment que le premier. J’aimerais qu’il n’y ait pas de décalage entre les deux et que le passage sur le deuxième gif ne se voit pas au niveau de l’animation (qui est donc décalée).

Je fais donc appel à vos lumières qui sans aucun doute m’aideront à résoudre ce soucis !

D’avance merci !

Salut cece2000, évite d’écrire aussi gros c'est va pas aller plus vite ou mieux vue...

Quand tu donne ton code ca donne plus envie aux autres de t'aider et pense à utiliser le bouton </> pour poster ton code...

Bon, je te donne ma solution :

<div class="img">
  <div class="img1"></div>
  <div class="img2"></div>
</div>

.img{
  width:100px;
  height:100px;
}
.img .img1{
  width:100px;
  height:100px;
  background:url("url.gif");
  background-size:cover;
}
.img .img2{
  display:none;
  width:100px;
  height:100px;
  background:url("url.gif");
  background-size:cover;
}
.img:hover .img1{
  display:none;
}
.img:hover .img2{
  display:block;
}

Si tu as des question sur le code ou autre nous sommes là, sinon look ma signature...

Merci pour la réponse rapide. Je teste ça dès ce soir. 

Et pour l’écriture aussi grosse, c’est mon copié-collé qui a mal était géré ! Ça ne se reproduira plus ;-) 

Merci !!

Bonjour noopy360,

Encore merci pour ta réponse hier. Le 2eme gif animé vient bien au dessus de l’autre en le cachant. Par contre j’ai toujours le même soucis. Il semblerait que le gif une fois visible se lance depuis son début. Je voudrais qu’il soit coordonné exactement au niveau de sa timeline avec le 1er... comme si il fallait que les 2 gifs soient chargés dès le départ et les rendre visible ou non...

Une idée noopy360 ? Je n’ai pas d’autre code a poster que celui que tu m’as donné hier :) 

Salut;

j'avais fais un test dans ce genre là il me semble, et la seule solution que j'avais trouvé c'était de les afficher tous les deux en même temps (pour qu'il n'y ai pas de décalage) et de jouer avec leur position "relative" lors du survol de leur conteneur, qui dispose de la propriété CSS "overflow: hidden"...

En espérant que ça t'aide.

Ps : Il risque d'y avoir quand même un léger décalage entre les deux animations, en fonction de leur poids et de la vitesse de leur chargement sur la page...

-
Edité par TheScar.fr 18 novembre 2017 à 17:04:14

Salut,

C'est peut-être une réponse bête (car je n'ai jamais tenté donc je ne sais pas si ça fonctionne), mais ne serait-il pas possible de réaliser ta demande à l'aide d'un sprite ?