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


  • Commentaires

    35
    Samedi 20 Août 2016 à 18:48

    mercii pour ça 

    34
    Vendredi 20 Février 2015 à 09:35
    Merci, j'ai essayé et ça rend vraiment bien ;D
    33
    Samedi 27 Septembre 2014 à 15:46

    Merci  ! 

    32
    Lundi 1er Septembre 2014 à 11:17

    Merci pour le code !

    31
    Lundi 21 Avril 2014 à 18:48
    D'accord, tant mieux dans ce cas !
    30
    Lundi 21 Avril 2014 à 18:23

    Non non, finalement ça a marché, c'était simplement à cause de mon navigateur ^^

    29
    Lundi 21 Avril 2014 à 11:00
    Bonjour Jack* ! Je voudrais bien t'aider, mais sans code, cela risque d'être difficile !
    28
    Dimanche 20 Avril 2014 à 23:04

    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

    27
    Mercredi 19 Février 2014 à 08:06

    Merci beaucoup, Mikuru ! Je le cherchai !

    26
    Samedi 12 Octobre 2013 à 22:31

    Merci mille fois <3 Merci pour tout, vraiment ! Bisous à toi et bonne continuation ! :D

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    25
    Samedi 12 Octobre 2013 à 20:39

    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;
     }

    24
    Vendredi 4 Octobre 2013 à 23:25

    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 !

    23
    Jeudi 26 Septembre 2013 à 18:25

    Merci Beaucoup !!!!

    22
    Jeudi 26 Septembre 2013 à 18:21

    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;
     }

    21
    ~Miliav♠ Profil de ~Miliav♠
    Lundi 23 Septembre 2013 à 18:15

    Merci, mais tu n'en n'aurai pas pour le texte ?

    20
    Faint Profil de Faint
    Samedi 25 Mai 2013 à 17:58

    Super le code *^*

    19
    Corea
    Mardi 26 Mars 2013 à 08:49

    Sa rend super merci :)

    18
    Mercredi 8 Août 2012 à 11:10

    Arigatou Mikuru-sama!! ( ouais, maintenant, c'est "sama"  )

    17
    Samedi 9 Juin 2012 à 19:07

    arrigato Mikuru >w<

    16
    Jeudi 17 Mai 2012 à 22:11

    Merci ! Ca marche vraiment bien ! 

    15
    Dimanche 6 Mai 2012 à 18:46

    Bizarre oO

    14
    Dimanche 6 Mai 2012 à 18:28

    Ah, si.
    Le code fonctionne, puisque je suis allée sur ton blog, l'opacité marche.
    C'est donc ton navigateur qui ne supporte pas :|

    13
    Dimanche 6 Mai 2012 à 18:11

    Ah na je suis pourtant sur ><

    12
    Dimanche 6 Mai 2012 à 18:10

    Tu as peut-être un autre code dans ton CSS qui empêche l'action de fonctionner.

    11
    Dimanche 6 Mai 2012 à 18:09

    A ben pourtant je copie/colle et rien je fait comme tu dit o_o

    10
    Dimanche 6 Mai 2012 à 18:08

    Si si il marche très bien. :o

    9
    Samedi 5 Mai 2012 à 21:42

    C'est moi ou sa marche pas l'inversement ? :o

    8
    Dimanche 22 Avril 2012 à 22:52

    Merci Mikuru >o<

    7
    Nesumi Profil de Nesumi
    Lundi 16 Avril 2012 à 22:35

    Je te remercie, je cherchais le code depuis assez longtemps ^^ 

    6
    Samedi 18 Février 2012 à 16:51

    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;
     }

    5
    Samedi 18 Février 2012 à 12:39

    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)

    4
    Cassia Profil de Cassia
    Mercredi 15 Février 2012 à 21:16

    Idem ! merci !

    3
    Dimanche 12 Février 2012 à 21:39

    Tout le plaisir est pour moi. ^^

    2
    Dimanche 12 Février 2012 à 21:38

    Je plussoie ! :)

    Merci beaucoup, Mikuru !

    1
    Dimanche 5 Février 2012 à 20:49

    Ahh merci je le chercher depuis longtemps !!

     

    Vous devez être connecté pour commenter