• Changer la taille des derniers visiteurs

              T A I L L E          

    Nous allons utiliser la propriété "max-width". Celle-ci permettra de tout simplement modifier la taille des derniers visiteurs. Plus la valeur sera grande, plus les derniers visiteurs seront grands. Par contre, il me semble qu'on ne peut pas aller au dessus de 100px.


    .module_menu_type_lastvisitors img {
    max-width: NOMBREpx;}

    Bien évidemment, vous remplacez NOMBRE par un nombre qui correspond à la taille que vous souhaitez.


              T A I L L E  A U   S U R V O L          

    C'est exactement le même code qu'au début, mais nous allons ajouter :hover, comme d'habitude.


    .module_menu_type_lastvisitors img:hover {
    max-width: NOMBREpx;}

    Mais si vous voulez changer de taille au survol, l'effet va être un peu bizarre
    --comme ceci--

    du coup on va rajouter une transition.


    .module_menu_type_lastvisitors img {
    max-width: NOMBREpx;
    text-decoration: none;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease; }

    .module_menu_type_lastvisitors img:hover {
    max-width: NOMBREpx;}


    Vous pouvez remplacer le "0.5" par une autre valeur. Celle-ci représente le temps que l'image va mettre à s'agrandir. Plus votre valeur sera élevée, plus les derniers visiteurs mettront du temps à s'agrandir au survol.

    Si on prend ce code :
    .module_menu_type_lastvisitors img {
    max-width: 30px;
    text-decoration: none;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease; }

    .module_menu_type_lastvisitors img:hover {
    max-width: 70px;}

    va donner ceci :

     

     

     

     


  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :