AccueilDernières imagesRechercherS'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.

Le deal à ne pas rater :
Pokémon EV8.5 : coffret Collection Classeur Évolutions Prismatiques
Voir le deal

    [Xooit] Description - effet hover

    Hiro'
    Hiro'
    MasculinAge : 27Messages : 127

    Dim 8 Déc 2013 - 14:54

    Sous ce nom très énigmatique se cache quelque chose de très simple que vous allez pouvoir apprécier sur mon forum de test Xooit. Cliquez ici, jeunes padawans.

    Vous avez compris le principe ? Cool. Maintenant, place aux codes. N'oubliez pas de créditer Never-Utopia si vous utilisez mon travail Wink


    Tout d'abord, il va falloir modifier un template, celle qui répond au doux nom de index_body. Dans ce template, vous allez chercher la  charmante balise

    Code:
    <style>
    et coller, juste en-dessous, le code suivant.

    Code:
    .description
    {
      display: block;
      width: 400px; /*Largeur de votre image*/
      margin: auto;
      height: 180px; /*Hauteur de votre image*/
      overflow: hidden;
    }
    .description_contenu
    {
      position: absolute;
      width: 400px; /*Largeur*/
      height: 180px;  /*Hauteur*/
      overflow: auto;
      background-color: #FFFFFF; /*Couleur de l'arrière-plan de la description*/
      font-size: 14px;
      font-family:'Georgia';
      color: #3E352E;
      text-align:center;
      padding:0px;
      opacity: 0;
      -moz-opacity: 0;
      -khtml-opacity: 0;
      filter: alpha(opacity=0);
      transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .description_contenu:hover
    {
      opacity: 0.8;
      -moz-opacity: 0.8;
      -khtml-opacity: 0.8;
      filter: alpha(opacity=80);
      transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    Vous l'avez remarqué, il s'agît du code CSS. Et dit qui dit Code CSS dit ennuis garantis balisage HTML :toto: !

    Il est assez simple malgré quelques subtilités. Vous vous rendrez bientôt compte que, sur Xooit, le plus compliqué, ce ne sont pas les codes, c'est de savoir où les mettre. Je vous souhaite donc beaucoup de courage pour trouver le menu "Sous Forums" si vous démarrez sur cette plateforme.
    La suite coule de source. Il faut modifier la description du sous-forum et y insérer ceci :

    Code:
    <div class="description"><div style="display: block; text-align: justify; width: 400px; height: 180px; background: url(http://i.imgur.com/minQVys.png) center center no-repeat;"><div class="description_contenu"><div style="OVERFLOW: auto; width: 380px; height: 160px; padding: 10px;">Insérez la description de votre catégorie ici, les coupaings !</div></div></div></div>
    Remplacez le lien par votre image, bien évidemment. J'attire votre attention sur les dimensions, et surtout sur cette petite chose qui, si vous ne la remarquez, pourrait vous faire vomir de toutes les couleurs.

    Code:
    padding: 10px;
    Ceci signifie que en haut, à droite, en bas et à gauche de votre cadre, il y aura une marge intérieure ! SO, dans les dimensions juste avant...
    Code:
    width: 380px; height: 160px;
    On enlève 20px à la hauteur, et 20px à la largeur. Faîtes bien attention à ça si vous changez les dimensions Wink.
    Enregistrez le tout et allez admirer votre boulow !

    Voilou, j'espère avoir été clair.
    Merci de ne pas copier ce tutoriel qui est mien, et n'oubliez pas le crédit à N-U en cas d'utilisation.

    Un petit merci ou commentaire est toujours le bienvenu ^^
    Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.



    Pas souvent là, mais je vous aime quand même très fort ! Étudiant en prépa littéraire, quand j'en ai marre de pas comprendre ce que je lis, je code pour ne plus comprendre non plus ce que j'écris.
    Melik
    Melik
    MasculinAge : 31Messages : 74

    Mer 11 Déc 2013 - 15:16

    Merci!
    Lestrange
    Lestrange
    FémininAge : 29Messages : 165

    Mer 1 Jan 2014 - 11:46

    Pile ce que je cherchais °°
    Merci (:
    JonathanLeGrand
    JonathanLeGrand
    MasculinAge : 29Messages : 28

    Jeu 2 Jan 2014 - 19:17

    merci
    Misaho Kiha
    Misaho Kiha
    FémininAge : 33Messages : 55

    Lun 20 Jan 2014 - 17:58

    Merci à toi
    FreeSpirit
    FreeSpirit
    MasculinAge : 28Messages : 167

    Dim 26 Jan 2014 - 18:53

    merci
    Alehandra
    Alehandra
    FémininAge : 29Messages : 43

    Mar 28 Jan 2014 - 22:28

    Merci pour le partage, c'est bien utile !
    Jill.
    Jill.
    FémininAge : 29Messages : 23

    Mer 29 Jan 2014 - 5:52

    Merci.
    Slown
    Slown
    FémininAge : 29Messages : 62

    Ven 31 Jan 2014 - 11:56

    Merci pour ce partage ♥
    Gnuh
    Gnuh
    FémininAge : 26Messages : 87

    Sam 1 Fév 2014 - 17:51

    Meurci ~



    [Xooit] Description - effet hover Untitl16
    сhampi
    сhampi
    FémininAge : 26Messages : 151

    Dim 2 Fév 2014 - 10:37

    Bonjour, merci pour ce partage !
    Vector.
    Vector.
    FémininAge : 25Messages : 39

    Mar 4 Fév 2014 - 20:34

    Merci
    BlackNight
    BlackNight
    MasculinAge : 37Messages : 90

    Sam 8 Fév 2014 - 18:49

    merci ! :hover
    Lakxi
    Lakxi
    FémininAge : 31Messages : 40

    Dim 9 Fév 2014 - 13:13

    merciiiiiiii  :love: 
    The Shiya
    The Shiya
    FémininAge : 35Messages : 77

    Dim 9 Fév 2014 - 14:35

    Merci =)



    [Xooit] Description - effet hover Test10
    Liberty Grim
    Liberty Grim
    FémininAge : 26Messages : 128

    Lun 10 Fév 2014 - 18:34

    C'est génial ** Merci !
    Lexis
    Lexis
    FémininAge : 34Messages : 40

    Mar 11 Fév 2014 - 14:53

    Merci Wink
    Maya Seiko
    Maya Seiko
    FémininAge : 31Messages : 129

    Lun 24 Fév 2014 - 16:33

    merciiiii ^^
    W' Wakune
    W' Wakune
    FémininAge : 25Messages : 11

    Sam 1 Mar 2014 - 16:09

    Trop chouette ! *-*
    avatar
    yumetenshi
    FémininAge : 27Messages : 8

    Ven 7 Mar 2014 - 1:12

    Thanx
    avatar
    Njut
    FémininAge : 24Messages : 43

    Ven 7 Mar 2014 - 17:41

    Super, merci ! :)
    Chaussette
    Chaussette
    FémininAge : 31Messages : 59

    Sam 8 Mar 2014 - 19:54

    super! merci !! ^o^
    Opaline
    Opaline
    FémininAge : 24Messages : 86

    Mar 11 Mar 2014 - 18:46

    Merci !



    [Xooit] Description - effet hover 140502022634448028
    Jull421
    Jull421
    FémininAge : 30Messages : 145

    Jeu 20 Mar 2014 - 1:53

    Merci



    [Xooit] Description - effet hover 140228025614860943
    Allison01
    Allison01
    FémininAge : 40Messages : 225

    Ven 28 Mar 2014 - 13:12

    merci beaucoup
    Contenu sponsorisé


      La date/heure actuelle est Ven 13 Déc 2024 - 21:51