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 :
Coffret Collection Poster Pokémon EV8.5 Évolutions Prismatiques : ...
Voir le deal

    [Xooit] Description - effet hover

    Hiro'
    Hiro'
    MasculinAge : 27Messages : 127

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

    Dim 3 Jan 2016 - 12:52

    merci
    Mlle-C
    Mlle-C
    FémininAge : 29Messages : 20

    Dim 10 Jan 2016 - 16:17

    Merci pour ce tuto très utile
    avatar
    Drogba JR
    MasculinAge : 32Messages : 90

    Ven 15 Jan 2016 - 11:51

    Merci
    WizzyFree
    WizzyFree
    MasculinAge : 31Messages : 2004

    Mar 16 Fév 2016 - 23:37

    merci



    [Xooit] Description - effet hover - Page 4 828103KidInk
    Mr. Shidokaz
    Mr. Shidokaz
    MasculinAge : 30Messages : 192

    Mar 22 Mar 2016 - 21:15

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

    Sam 9 Avr 2016 - 11:08

    merci beaucoup !
    Arkaline
    Arkaline
    FémininAge : 33Messages : 195

    Lun 11 Avr 2016 - 19:26

    Merci !



    Arkaline
    blomkvist
    blomkvist
    FémininAge : 33Messages : 44

    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.
    Kraken
    Kraken
    FémininAge : 31Messages : 137

    Jeu 14 Avr 2016 - 1:32

    Merci !
    Kirito
    Kirito
    MasculinAge : 28Messages : 209

    Jeu 14 Avr 2016 - 16:52

    thx
    Aidden
    Aidden
    MasculinAge : 30Messages : 45

    Ven 22 Avr 2016 - 14:53

    merci !
    TRR-KOS
    TRR-KOS
    FémininAge : 31Messages : 19

    Lun 23 Mai 2016 - 20:58

    Merci !
    Antithée
    Antithée
    FémininAge : 27Messages : 69

    Dim 24 Juil 2016 - 21:58

    Merci ! Very Happy
    Cissy
    Cissy
    FémininAge : 32Messages : 64

    Lun 15 Aoû 2016 - 22:28

    Merci ! Razz
    Astrid Hofferson
    Astrid Hofferson
    FémininAge : 29Messages : 18

    Mer 31 Aoû 2016 - 19:36

    merci
    Anonymous
    Invité

    Ven 7 Oct 2016 - 2:02

    Merci!
    STL
    STL
    FémininAge : 49Messages : 12

    Sam 29 Oct 2016 - 9:18

    Merci beaucoup
    Argogne
    Argogne
    MasculinAge : 32Messages : 1

    Sam 19 Nov 2016 - 14:06

    Merci !
    RPG Maker
    RPG Maker
    FémininAge : 30Messages : 53

    Mer 23 Nov 2016 - 22:13

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

    Ven 9 Déc 2016 - 19:40

    MERCI ! PLEINS DE BISOUS ! ♥♥
    Sangohan
    Sangohan
    MasculinAge : 27Messages : 6

    Ven 9 Déc 2016 - 22:27

    merci
    Djeina
    Djeina
    FémininAge : 28Messages : 233

    Mer 18 Jan 2017 - 7:56

    Merci du partage ^^
    lounythithi
    lounythithi
    MasculinAge : 29Messages : 14

    Ven 20 Jan 2017 - 2:15

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

    Mar 31 Jan 2017 - 16:52

    merci!
    Marianinna
    Marianinna
    FémininAge : 33Messages : 19

    Mar 25 Avr 2017 - 15:10

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Ven 13 Déc 2024 - 22:55