• Images floues

             N O R M A L          
     

     img{
            filter:blur(0px);
    }

    blur : c'est le filtre qui permet de flouter les images

    0px : valeur à modifier. Plus elle sera élevée, plus l'image sera floue.


              S U R V O L         

    C'est le même code, mais on va rajouter ":hover".
     

     img:hover{
         filter:blur(3px);
    }

     

             T R A N S I T I O N         

    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 :

    img{ filter:blur(0px);
    -webkit-transition
    : all 0.5s ease;

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

    0.5 : valeur à changer. 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{filter: blur(5px);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;}
    img:hover{filter: blur(0px);

     

    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 :