Script effet d'opacité de l'image

Fermé
mamyvel - 4 août 2018 à 09:42
mamyvel Messages postés 11 Date d'inscription samedi 4 août 2018 Statut Membre Dernière intervention 30 août 2018 - 4 août 2018 à 13:30
Bonjour, j'avais installé ce script sur une page html mais ça ne fonctionne pas :

https://codes-sources.commentcamarche.net/source/16032-effet-d-opacite-progressif-au-passage-de-la-souris

Quelqu'un pourrait-il m'apporter des précisions? merci



A voir également:

3 réponses

elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 1 324
Modifié le 4 août 2018 à 10:20
Bonjour
c'est un code de plus de 15 ans, les navigateurs et le code ont évolués depuis
il te suffit de mettre ce code dans les css

 img.opacity {
  opacity: 1;
  /* IE8 et antérieurs */
  filter: alpha(opacity=100);
  /* Déclenche "hasLayout" dans IE 7 et antérieurs */
  zoom: 1; 
}
 
img.opacity:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
  zoom: 1;
}



ensuite dans le code html, il te suffit de mettre la class opacity dans les balises img que tu veux opacifier, dans l'exemple suivant, seule la photo1 sera opacifiée quand le curseur de la souris sera dessus
<img class="opacity" src="photo1.jpg" >
<img src="photo2.jpg" >


pour régler l'opacité, il suffit de changer les paramètres opacity=1 étant l'image normale, opacity=0.1 étant une image a peine visible

1
mamyvel Messages postés 11 Date d'inscription samedi 4 août 2018 Statut Membre Dernière intervention 30 août 2018
4 août 2018 à 12:45
merci elgazar c'est bon, mais c'est l'effet contraire que je voudrais, c'est-à-dire que les images soient toutes opacifiées au chargement de la page, et au passage de la souris dessus qu'elles redeviennent normales....
(ce sont des images avec des liens)
merci
0
mamyvel Messages postés 11 Date d'inscription samedi 4 août 2018 Statut Membre Dernière intervention 30 août 2018
4 août 2018 à 10:01
je viens de m'inscrire
0
mamyvel Messages postés 11 Date d'inscription samedi 4 août 2018 Statut Membre Dernière intervention 30 août 2018
4 août 2018 à 13:30
C'est bon, j'ai trouvé, il suffisait d'inverser l'opacity : comme tu le dis ici :

"pour régler l'opacité, il suffit de changer les paramètres opacity=1 étant l'image normale, opacity=0.1 étant une image a peine visible "

Merci beaucoup bonne journée !
0