• 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: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 feuille

    img {
        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 Tags : , , , ,
  • Commentaires

    35
    Dalice mervelis Profil de Dalice mervelis
    Lundi 27 Mai 2013 à 13:29

    merci beaucoup ^^

    34
    Mardi 2 Avril 2013 à 18:36

    merci t'est trop gentil >.<

    33
    Mardi 2 Avril 2013 à 18:21

    Je t'en prie, il n'y a pas de mal. ^^

    32
    Lundi 1er Avril 2013 à 21:18

    ok merci et desole

    31
    Lundi 1er Avril 2013 à 19:43

    Le code est à insérer dans le CSS, le revoici :
    img {         
        filterurl("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");
        filtergray;
        -webkit-filtergrayscale(100%);
    }     
    img:hover {
        filterurl("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-filtergrayscale(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. :)

    30
    Lundi 1er Avril 2013 à 16:21

    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 _ _

    29
    Dimanche 31 Mars 2013 à 21:32

    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 ! :)

    28
    Samedi 30 Mars 2013 à 21:13

    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?

    27
    Mercredi 20 Mars 2013 à 15:12

    merci beaucoup 

    26
    lucie3 Profil de lucie3
    Samedi 2 Mars 2013 à 13:05

    merci !!!!!!!! 

    25
    Vendredi 13 Juillet 2012 à 14:59

    Mercii ^^

    24
    Beativement Profil de Beativement
    Vendredi 2 Mars 2012 à 10:17

    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 ? 

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    23
    Vendredi 20 Janvier 2012 à 07:49

    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 !

    22
    Choco Chan
    Mercredi 28 Septembre 2011 à 19:26

    Merci :D

    21
    Dimanche 25 Septembre 2011 à 09:08

    Merci Miku (je peux t'appeler comme ça?),ça marche parfaitement chez moi!

    20
    Mercredi 21 Septembre 2011 à 19:32

    KYAAAAAHHHHHHHHHHHHHHHHHHHHHHHHHHHH

    MERCI beaucoup!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    Je t'adoreuhh!!

    19
    Mercredi 21 Septembre 2011 à 18:08

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

    18
    Mardi 20 Septembre 2011 à 19:53

    Ah oi c'est vrai-^^" sa sera sur mon blgo de test s'il te plait,je te l'ai ise voilà ^^ merci beaucoup:!!!!!

    17
    Mardi 20 Septembre 2011 à 18:34

    Je veux bien mais il me faut la permission. ^^'

    16
    Lundi 19 Septembre 2011 à 19:55

    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--"

    15
    Lundi 19 Septembre 2011 à 19:54
    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é. :(
    14
    Lundi 19 Septembre 2011 à 19:50

    j'utilise google chrome

    13
    Dimanche 18 Septembre 2011 à 20:41

    Google Chrome

    12
    Dimanche 18 Septembre 2011 à 20:39
    Peut etre que cela vient de ton naviguateur alors. Quel naviguateur utilise tu ?
    11
    Dimanche 18 Septembre 2011 à 20:35

    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

    10
    Dimanche 18 Septembre 2011 à 20:18

    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. ^^'

    9
    Dimanche 18 Septembre 2011 à 19:26

    le deuxième

    8
    Dimanche 18 Septembre 2011 à 15:11
    Tu as ajouté quoi dans ton CSS ?
    Le code pour l'effet de la première icon ou celui du deuxième ?
    7
    Dimanche 18 Septembre 2011 à 15:03
    6
    Dimanche 18 Septembre 2011 à 14:51

    Ah, c'est bizarre.
    Est-ce que tu as changé le numéro 0.8 ou 1 pour l'opacité ?

    5
    Dimanche 18 Septembre 2011 à 13:59

    Sa ne marche pas...

    4
    Vendredi 2 Septembre 2011 à 16:48

    Merci beaucoup Mikuru :D

    *salue Mikuru et s'enfuit*

    3
    Angelse Profil de Angelse
    Lundi 29 Août 2011 à 22:18

    Idem! =o


    Merci beaucoup Mikuru <3 

    2
    Vendredi 26 Août 2011 à 09:56

    Moi non plus et encore merci !!

    1
    Jeudi 25 Août 2011 à 10:16

    Merci ^^ Je connaisais pas comment on faisait celui là !

    Vous devez être connecté pour commenter