Opacité des images

qu'est-ce que c'est ?

Pour les exemples je vais me servir des derniers icons que j'ai fait.
Voila ce que devrait donner le résultat de ce tutoriel, passez votre souris dessus.

comment faire ?

Pour commencer, ouvrez la feuille CSS de votre blog
Apparence > Modifier le thème > Ajouter du CSS

1. APPLIQUER L'EFFET DU PREMIER ICON (Opaque > Transparent)

Copiez/collez le code suivant dans votre feuille

img c'est le sélecteur par défaut de la totalité des images présentes sur votre blog, lorsque l'on rajoute la variante :hover à un sélecteur ça ne le concerne que lorsque l'on passe la souris dessus.
opacity c'est l'opacité de l'image, il est suivit de la valeur 0.8 dans l'exemple ci-dessus mais vous pouvez changer la valeur à votre guise entre 0.0 et 1, 0.0 étant totalement transparent et 1 totalement opaque.

2. APPLIQUER L'EFFET DU DEUXIEME ICON (Transparent > Opaque)

Copiez/collez le code suivant dans votre feuille

Inutile de réecrire les même explication du haut concernant le deuxième bloc, penchons nous sur le premier.
Donc img c'est toujours le sélecteur par défaut des images de votre blog, sauf que cette fois il n'est pas suivit de la variante :hover et donc il concerne l'image lorsque qu'elle n'est pas touchée. Dans l'exemple l'opacité de l'image à une valeur de 0.8 mais comme dit plus haut, vous pouvez la changer à votre guise. Ainsi, l'image paraitra transparente à première vue. L'utilité du deuxieme bloc maintenant, c'est de rendre l'image "normale" au passage de la souris, du coup l'opacité est réglée sur 1 (Totalement opaque) et au passage de votre souris vous verez l'image et ses couleurs originales.