-
Opacité progressive
qu'est-ce que c'est ?
Pour l'exemple je vais utiliser mon icone de profil actuelle (enfin, c'était mon icone de profil).
Passez votre souris dessus, observez, retirez là, observez.Avouez, quand même, que c'est bien plus élégant qu'une opacité qui arrive et s'enlève sans transition ! Et en plus, même pas besoin de JavaScript, tout est dans le CSS !
comment faire ?Ouvrez la feuille CSS de votre blog
Apparence > Modifier le thème > Ajouter du CSSCollez-y le code suivant
img {
-moz-transition: opacity 0.4s linear 0s;
-webkit-transition: opacity 0.4s linear 0s;
transition: opacity 0.4s linear 0s;
opacity: 0.5;
}
img:hover {
-moz-transition: opacity 0.4s linear 0s;
-webkit-transition: opacity 0.4s linear 0s;
transition: opacity 0.4s linear 0s;
opacity: 1;
}Les parties colorées en rouge, orange et vert du code sont deja expliquée dans un précédent tutoriel à relire à cette adresse du blog : http://portfolio.ek.la/opacite-des-images-c959962
Il reste donc les parties colorées en violet.
Les différents 0.4 que vous pouvez lire représentent la durée de la transition en secondes.
Si vous trouvez que 4 secondes sont trop rapides pour une transition ou bien trop lente, vous pouvez remplacer le 4 par un chiffre entre 0 et 9 jusqu'à ce que le résultat vous plaise.
Si vous avez des questions, n'hésitez pas.
-
Commentaires
J'ai un problème avec ce code : quand je le met dans mon CSS, il me dit qu'il y a une erreur. Pourtant je l'ai bien copié/collé et j'ai vérifié que tout était en ordre, je ne sais pas ce qui ne va pas... Merci d'avance si tu peux m'aider :)
Edit : Ah non, excuse-moi, c'était à cause de mon navigateur (j'utilisais Safari). Ça marche sur Firefox ! Merci beaucoup pour le code =D
Coucou ! Excuse moi de la réponse tardive, voilà pour toi !
.module_menu_type_lastvisitors img {
-moz-transition: opacity 0.4s linear 0s;
-webkit-transition: opacity 0.4s linear 0s;
transition: opacity 0.4s linear 0s;
opacity: 0.5;
}
.module_menu_type_lastvisitors img:hover {
-moz-transition: opacity 0.4s linear 0s;
-webkit-transition: opacity 0.4s linear 0s;
transition: opacity 0.4s linear 0s;
opacity: 1;
}Coucou ! Je trouve ton site vraiment génial ! Je voulais te demander, quel serait le code pour mettre en opacité progressive sur les avatars de mes derniers visiteurs ? J'espère que tu pourras m'aider. Merci, et bonne continuation !
Peut-être ça ?
p {
-moz-transition: opacity 0.4s linear 0s;
-webkit-transition: opacity 0.4s linear 0s;
transition: opacity 0.4s linear 0s;
opacity: 0.5;
}
p:hover {
-moz-transition: opacity 0.4s linear 0s;
-webkit-transition: opacity 0.4s linear 0s;
transition: opacity 0.4s linear 0s;
opacity: 1;
}19CoreaMardi 26 Mars 2013 à 08:49Ah, si.
Le code fonctionne, puisque je suis allée sur ton blog, l'opacité marche.
C'est donc ton navigateur qui ne supporte pas :|Ah, très bonne question. Il suffit d'inverser les valeurs de opacity en mettant 1 sur l'image non survolée et 0.5 sur l'image survolée, comme cela :
img {
-moz-transition: opacity 0.4s linear 0s;
-webkit-transition: opacity 0.4s linear 0s;
transition: opacity 0.4s linear 0s;
opacity: 1;
}
img:hover {
-moz-transition: opacity 0.4s linear 0s;
-webkit-transition: opacity 0.4s linear 0s;
transition: opacity 0.4s linear 0s;
opacity: 0.5;
}Merci beaucoup, je le cherchais *____*
J'ai une question, aussi. Comment fait-on pour inverser l'opacité? (c'est à dire que l'image devient opaque lorsqu'on met le curseur dessus)
Vous devez être connecté pour commenter
mercii pour ça