AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Galerie d'avatar avec crédit et zoom au survol.

    Ayael
    Ayael
    FémininAge : 23Messages : 595

    le Jeu 23 Mar 2017 - 12:49



    Bonjour, cela fait longtemps :p Je viens proposer ce code que j'ai fais pour mon forum récemment, il s'agit d'une galerie d'avatar avec une zone pour les crédits et un effet de zoom au survol. Simple mais efficace, contenant seulement du HTML et du CSS

    Capture d'écran / Capture au survol


    Les dimensions des images sont bien entendu modifiables à volonté mais prenez garde à conserver les proportions autrement l'image miniature apparaitra déformée.


    Le CSS :
    Code:
    /* Affichage des images*/
       
    div.proposition_avatar {
    width: 500px;  /*largeur du cadre total, modifiable selon le nombre d'image que vous voulez par ligne. */
    margin-top:70px; /* marge en haut pour éviter que l'image chevauche quelque chose d'autre au survol.*/
    margin-bottom:70px; /* marge en bas pour éviter que l'image chevauche quelque chose d'autre au survol.*/
    line-height: 0;

    /*centre le bloc sur la page*/
    margin-left:auto;
    margin-right:auto;
    }


    div.proposition_avatar p, div.proposition_avatar p img {
    width: 120px; /* Largeur de la miniature */
    height: 240px; /* Hauteur de la miniature */
    float:left;

    }

    div.proposition_avatar p {
    display: inline-block;
    position: relative;
    margin: 1px; /* marge entre les images, peut être augmenté si nécessaire */
    }


    div.proposition_avatar p img {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
     
    }

    div.proposition_avatar p:hover img {
    height: 400px; /* Hauteur finale de l'image */
    width: 200px; /* Largeur finale de l'image */
    z-index: 99;
     
    /*Gère la position de la grande image, peut être modifié */
    left: -25%; /*Décale l'image vers la gauche*/
    top: -25%; /* Décale l'image vers le haut*/
    }

    /*********** Gère la partie "crédit"*/

    /*crédit pour la miniature*/
    div.proposition_avatar p .credit {
    position:absolute;
    display:block;
    z-index:2;

    width:110px; /* largeur du cadre, à modifier en fonction de la largeur de votre image miniature*/
    padding:5px;
    line-height:15px;

    bottom:0px; /* positionne le cadre en bas de l'image, peut être modifié*/
    background-color:rgba(0, 0, 0, 0.5); /* couleur de fond du cadre, par défaut noir, peut être modifié*/ 
    font-family:arial; /* Police d'écriture, peut être modifié*/
    text-align:center; /*centre le texte, peut être modifié*/
    color:#fff; /*couleur du texte, peut être modifié*/
    font-size:11px; /*taille du texte, peut-être modifié*/

    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
          }
          
    /* crédit au survol des images*/
    div.proposition_avatar p:hover span.credit {
    z-index:99;
    width:190px!important; /*largeur du cadre, à modifier en fonction de la largeur de votre grande image -10px */
    font-size:16px;
    bottom:-100px; /*permet de positionner le cadre en bas de l'image, doit être modifié en fonction de la taille de votre grande image*/
    left:-25%; /* Permet de positionner le cadre sur la gauche, peut être modifié*/
    }


    Le html

    Code:
    <div class="proposition_avatar">   

       <p><img src="lien image en grandeur finale"/><span class="credit">Texte de crédit ou autre </span></p><!--NEXT--><p><img src="lien image en grandeur finale"/><span class="credit">Texte de crédit ou autre </span></p>

    <div class="clear: both;"></div>
    </div>

    Cet élément est multipliable à l'infini selon le nombre d'image que vous voulez afficher :
    Code:
    <!--NEXT--><p><img src="lien image en grandeur finale"/><span class="credit">Texte de crédit ou autre </span></p>

    Comme je suis d'humeur généreuse, j'ai également codé une variante ou le crédit n'apparait QUE au survol de l'image. Le html est le même, seul le CSS change.

    CSS : crédit uniquement au survol
    Code:
    /* Affichage des images*/
       
    div.proposition_avatar {
    width: 500px;  /*largeur du cadre total, modifiable selon le nombre d'image que vous voulez par ligne. */
    margin: auto; /*centre le cadre*/
    margin-top:70px; /* marge en haut pour éviter que l'image chevauche quelque chose d'autre au survol.*/
    margin-bottom:70px; /* marge en bas pour éviter que l'image chevauche quelque chose d'autre au survol.*/
    line-height: 0;
    }


    div.proposition_avatar p, div.proposition_avatar p img {
    width: 120px; /* Largeur de la miniature */
    height: 240px; /* Hauteur de la miniature */
    float:left;

    }

    div.proposition_avatar p {
    display: inline-block;
    position: relative;
    margin: 1px; /* marge entre les images, peut être augmenté si nécessaire */
    }


    div.proposition_avatar p img {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
     
    }

    div.proposition_avatar p:hover img {
    height: 400px; /* Hauteur finale de l'image */
    width: 200px; /* Largeur finale de l'image */
    z-index: 99;
     
    /*Gère la position de la grande image, peut être modifié */
    left: -25%; /*Décale l'image vers la gauche*/
    top: -25%; /* Décale l'image vers le haut*/
    }

    /*********** Gère la partie "crédit"*/


    .credit {
    display:none;
    }
          
    /* crédit au survol des images*/
    div.proposition_avatar p:hover span.credit {
    display:block;
    padding:5px;
    line-height:15px;
    position:absolute;
    color:#fff; /*couleur du texte, peut être modifié*/
    background-color:rgba(0, 0, 0, 0.5); /* couleur de fond du cadre, par défaut noir, peut être modifié*/ 
    font-family:arial; /* Police d'écriture, peut être modifié*/
    z-index:99;
    width:190px!important; /*largeur du cadre, à modifier en fonction de la largeur de votre grande image -10px */
    font-size:16px;
    bottom:-100px; /*permet de positionner le cadre en bas de l'image, doit être modifié en fonction de la taille de votre grande image*/
    left:-25%; /* Permet de positionner le cadre sur la gauche, peut être modifié*/
    }



    Voilà, en espérant que cela sera utile à certains d'entre vous !
    En ligne
    Onyx
    Onyx
    FémininAge : 25Messages : 3231

    le Mar 19 Sep 2017 - 11:00

    Salut!

    Tout a l'air bon alors je mets ça dans les LS, merci beaucoup du partage ^^

    Note : Le seul préfixe encore nécessaire pour "transition" est "-webkit-", les autres sont inutiles.

    Note 2 : Après les éléments flottants avec float, il faut toujours mettre ceci pour arrêter le float et éviter de devoir mettre une hauteur au bloc qui entoure les éléments flottants :
    Code:
    <div class="clear: both;"></div>



    Kelalin
    Kelalin
    FémininAge : 26Messages : 2058

    le Mar 19 Sep 2017 - 11:24

    Merci pour le partage !
    Ayael
    Ayael
    FémininAge : 23Messages : 595

    le Sam 23 Sep 2017 - 10:42

    De rien <3

    Et effectivement, pour le clear:both, j'avais eu des surprises et j'avais dû rajouter ça, j'ai juste oublié de le signaler x)

    En espérant que cela aide quelques personnes ^^
    Contenu sponsorisé


      La date/heure actuelle est Jeu 18 Avr 2019 - 20:54