• Changer le contraste des images

    Voici une manière de changer le contraste des vos 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

             N O R M A L          

     img {
            filter: contrast(100%) ;}

    contrast : c'est le filtre qui vous permet de rendre vos images plus lumineuses.
    100% : valeur à changer selon vos goûts. Sachant que 100 est la luminosité de départ. Si vous dépassez cent, vous allez ajouter du constraste, et si vous mettez une valeur inférieure, vous allez enlever du contraste.
     

             S U R V O L         
    Au survol, c'est le même code, avec ":hover".

     img:hover {
            filter: contrast(150%) ;}
     
     


             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:contrast(100%);
    -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: brightness(100%);
    -webkit-transition: all 0.5s ease;

    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;}
    img:hover{filter: brightness(200%);}

     

    Sans le code :



    Avec le code :

     

    « Changer de la lumière des imagesFaire tourner les images au survol »

  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :