• Opacité des images

    Comment modifier l'opacité des images ?

    RAPPELS :
    - Vous pouvez cliquer sur TOUTES les images pour les voir en plus grand
    - Le code CSS est à placer ici :

    Installer une police et l'utiliser

               A P P A R E N C E          

    Voici le code

    img{opacity:0.5;}


    img
    : le sélecteur qui désigne toutes les images du blog.
    opacity  : c'est la propriété permettant de changer l'opacité de votre image. Il faut choisir un nombre compris entre 0 et 1, et si il est à virgule, il faut séparer la partie entière de la partie décimale avec un point.
    Ex : opacity : 0.2
    opacity : 1

              S U R V O L          
    Et pour changer l'opacité au survol, vous l'aurez deviné, c'est exactement la même chose, sauf qu'on va rajouter ":hover" pour dire que 'est au survol. Je rappelle que 1, c'est totalement opaque. Une valeur supérieure, ben ça ne changera rien.

    img:hover{opacity:0.5;}


    Si vous ne mettez que ces codes, vous aurez un passage au survol brutal et pas très beau. Pour changer ça, il faut mettre une transition :

             T R A N S I T I O N         

    img{opacity:0.5;
    -webkit-transition
    : all 0.5s ease;

    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;}


    0.5
    : valeur à changer. Tout comme l'opacité, il faut séparer d'un point et non d'une virgule les nombres à virgule. Et plus votre valeur sera élevée, plus l'image prendra du temps à passer de l'état normal à l'état survolé.

    Sans transition -->    <-- Avec transition

       

    Prenons le code :
    img{opacity:0.7;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;}

    img:hover{opacity:1;}

     

    Sans le code :



    Avec le code :

     


  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :