-
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 feuilleimg:hover {
opacity: 0.8;
}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 feuilleimg {
opacity: 0.8;
}
img:hover {
opacity: 1;
}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.
Tags : image, opacity, blog, img, transparent
-
Commentaires
Le code est à insérer dans le CSS, le revoici :
img {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
}
img:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);
}
Mais la prochaine fois, s'il te plait, fais ta demande dans la rubrique appropriée, c'est à dire dans "Besoin d'un code ?" et vois si ta demande n'a pas déjà été faite. Ce n'est pas contre toi, c'est juste que j'aime bien quand les choses sont à leur place. :)a bon en fait pour tous dire j'ai fait un erreur dans un code d'image et ca a donner ca mais va voir sur mon blog je l'est perdue _ _
Oui bonjour, j'ai déjà répondu à cette question dans la partie "Besoin d'un code ?" mais, à ce que j'ai vu, tu as déjà appliqué cet effet sur ton blog ! :)
salut j'aimerai bien un code pour donner un effet accer particulier a une image est ce que c'est possible de donner un aire noir et blanc a toutes les images du blog et quans t'on met le curseur sur l'image elle reprends ses couleurs?
Salut, j'ai une question, serait-il possible d'addapter le code en fonction de la taille de l'image ? C'est a dire, par exemple, qu'une image de dimension supérieur a 250x250px ne serais pas affecté par le code. Tu vois ce que je veux dire?
En tout cas merci beaucoup pour le code ^_^ (et tout les autres aussi d'ailleurs).
EDIT: Ou bien sinon seulement si les images ont un liens incéré dedans ?
Coucou ^^
J'ai une question : Sur iconmuty, quand on passe sous les image, l'image s'éclaircit petit a petit, et j'aimerais avoir pareille sur mon blog. Es ce que tu connais le CSS pour faire ça ? merci !
22Choco ChanMercredi 28 Septembre 2011 à 19:26KYAAAAAHHHHHHHHHHHHHHHHHHHHHHHHHHHH
MERCI beaucoup!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Je t'adoreuhh!!
Aaah ! C'est bon je te l'ai mis.
En fait l'erreur venait de mon code, je suis vraiment désolée, vraiment !
J'ai honte ! x"D Non, sincerement, encore une fois désolé. ><
Le problème c'etait qu'il n'y avait pas de . avant les codes en fait, tout simplement.
Je m'excuse (Oui, encore.).Ah oi c'est vrai-^^" sa sera sur mon blgo de test s'il te plait,je te l'ai ise voilà ^^ merci beaucoup:!!!!!
tu peut essayer de le mettre sur mon blog de test stp?enfin le mettre après je ferai copier coller sur mon blog peut-etr euq eje l'ai mal mis car les css et moi on n'est pas très amis--"
Ah, c'est encore plus étrange.
Je ne peux pas vraiment t'aider là. Peut-être que ta version ne prend pas en charge ce CSS ?
Je ne sais pas, désolé. :(En fait j'ai copié/coler ton code que tu as mis :
.img {
opacity: 0.8;
}
.img:hover {
opacity: 1;
}Mais sa ne marche pas...alors que j'ai apuyé sur enregistrer
Et.. comment est-ce que je peux t'aider en fait ?
Parce qu'avec ces informations je ne peux pas faire grand chose tu penses bien. ^^'Tu as ajouté quoi dans ton CSS ?
Le code pour l'effet de la première icon ou celui du deuxième ?Vous devez être connecté pour commenter
merci beaucoup ^^