Opacité progressive

05.02.2012

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 CSS

Collez-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.