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.


    [Xooit] Description - effet hover

    Partagez
    avatar
    Hiro'
    MasculinAge : 21Messages : 127

    le Dim 8 Déc 2013 - 14:54

    Rappel du premier message :

    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.
    avatar
    Elewen
    FémininAge : 18Messages : 22

    le Dim 3 Jan 2016 - 12:52

    merci
    avatar
    Mlle-C
    FémininAge : 24Messages : 20

    le Dim 10 Jan 2016 - 16:17

    Merci pour ce tuto très utile
    Drogba JR
    MasculinAge : 26Messages : 88

    le Ven 15 Jan 2016 - 11:51

    Merci
    avatar
    WizzyFree
    MasculinAge : 25Messages : 1998

    le Mar 16 Fév 2016 - 23:37

    merci



    avatar
    Mr. Shidokaz
    MasculinAge : 24Messages : 190

    le Mar 22 Mar 2016 - 21:15

    Merci beaucoup pour le partage, c'est super sympa comme effet ! :)
    avatar
    Teddyy
    FémininAge : 23Messages : 7

    le Sam 9 Avr 2016 - 11:08

    merci beaucoup !
    avatar
    Arkaline
    FémininAge : 27Messages : 186

    le Lun 11 Avr 2016 - 19:26

    Merci !



    Arkaline
    avatar
    blomkvist
    FémininAge : 27Messages : 44

    le Lun 11 Avr 2016 - 20:46

    MERCI! ca fait deux jours que je cherche une explication :faint:



    ☆ once upon a dream ☆
    I know you, I walked with you once upon a dream. I know you, that look in your eyes is so familiar a gleam. And I know it's true that visions are seldom all they seem. But if I know you, I know what you'll do. You'll love me at once, the way you did once upon a dream. ~ byendlesslove.
    avatar
    Kraken
    FémininAge : 25Messages : 137

    le Jeu 14 Avr 2016 - 1:32

    Merci !
    avatar
    Kirito
    MasculinAge : 23Messages : 200

    le Jeu 14 Avr 2016 - 16:52

    thx
    avatar
    Aidden
    MasculinAge : 24Messages : 45

    le Ven 22 Avr 2016 - 14:53

    merci !
    avatar
    TRR-KOS
    FémininAge : 25Messages : 19

    le Lun 23 Mai 2016 - 20:58

    Merci !
    avatar
    Antithée
    FémininAge : 21Messages : 69

    le Dim 24 Juil 2016 - 21:58

    Merci ! Very Happy
    avatar
    Cissy
    FémininAge : 26Messages : 63

    le Lun 15 Aoû 2016 - 22:28

    Merci ! Razz
    avatar
    Astrid Hofferson
    FémininAge : 23Messages : 18

    le Mer 31 Aoû 2016 - 19:36

    merci
    avatar
    Jynnea
    FémininAge : 23Messages : 103

    le Ven 7 Oct 2016 - 2:02

    Merci!
    avatar
    STL
    FémininAge : 43Messages : 12

    le Sam 29 Oct 2016 - 9:18

    Merci beaucoup
    avatar
    Argogne
    MasculinAge : 26Messages : 1

    le Sam 19 Nov 2016 - 14:06

    Merci !
    avatar
    RPG Maker
    FémininAge : 24Messages : 47

    le Mer 23 Nov 2016 - 22:13

    Cool, ça m'a l'air sympas. ^^
    avatar
    Géranium
    FémininAge : 18Messages : 56

    le Ven 9 Déc 2016 - 19:40

    MERCI ! PLEINS DE BISOUS ! ♥♥
    avatar
    Sangohan
    MasculinAge : 21Messages : 6

    le Ven 9 Déc 2016 - 22:27

    merci
    avatar
    Djeina
    FémininAge : 22Messages : 233

    le Mer 18 Jan 2017 - 7:56

    Merci du partage ^^
    avatar
    lounythithi
    MasculinAge : 23Messages : 14

    le Ven 20 Jan 2017 - 2:15

    Michiiii^^
    avatar
    Pull en Laine qui Gratte
    FémininAge : 14Messages : 71

    le Mar 31 Jan 2017 - 16:52

    merci!
    avatar
    Marianinna
    FémininAge : 27Messages : 18

    le Mar 25 Avr 2017 - 15:10

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Dim 16 Déc 2018 - 17:59