Unproblème de transition
    Message le Dim 24 Sep - 15:43
    Bonjour, je viens demander de l'aide. Je suis actuelment en formation intégrateur/devellopeur web et  j'apprend à me servir de tout plein de langages dont le html et css qui vont grandement me faciliter la vie pour mes forums.

    Histoire d'apprendre en plus, j'essaye de faire moi-même certains codages que je voudrais et là je bloque. J'explique. Mes fiches ont été codées par une autre codeuse, mais par respect, même si je change le codage, vous verrez toujours son copyright je tiens à le préciser. Vous me direz : pourquoi ne pas lui demander directement ? Parce que j'apprend tout simplement! (et qu'elle n'est pas forcément disponible.)

    Voici mon souci. Je travail actuellement sur la fiche de pub de mon forum et je voulais faire une transition sur mes images de staff (genre on passe la souris sur l'image et magie du codage une boite avec le nom du perso, son rang et un lien pour le contacter apparait. Plus comunement appeler une infobulle, cependant elle serais uniquement derrière l'image).

    Après plusieurs tentatives en me basant sur un code existant que j'avais déjà vu auparavant, j'ai réussi à faire quelque chose (merci la première semaine de formation aussi XD) cependant la transition ne fonction pas du tout comme voulu... pire, dans chrome quand j'inspecte l'élément, la transition est carrément barrée !  Je ne sais pas quoi faire alors si quelqu'un peu m'éclairer sur ce qui ne va pas cela serai super cool merci ^^ je vous met le code:

    (ps: la fiche pub sera en iframe donc elle est totalement codée pour la mettre en pae html)
    (pps: dans le code, ce qui est conserner, c'est le staff et les class .stafftexte .staffimg img et .staffimg img:hover)

    Code:
    <!doctype html>
    <html>
    <meta charset="utf-8" /><script src="http://tinyurl.com/var-fa" type="text/javascript"></script>
    <center>
               <link href="http://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet" type="text/css" /><style>
    .cadrean {
      background:url(http://i64.tinypic.com/i211nb.png);
      border-bottom:5px solid #542209;
      width:500px;
      padding:20px;

    }
     .cadrean a{

     text-decoration: none;
     }
     
    h1 {
      font-family:great vibes;
      font-size:40px;
      text-align:center;
      text-transform: lowercase;
      border-bottom: 1px solid #542209;
      color: #d3b876;
      margin:0;
    }

    .blocan {
      background:#915A38;
      padding:20px;
      text-align:justify;
      font-size:13.5px;
      line-height:15px;
    }

    .blocan .hoveran {
      width:100%;
      margin-bottom:10px;
    }

    h2 {
      font-family:great vibes;
      font-size:28px;
      text-transform: lowercase;
      color: #d3b876;
      margin:0;
    }

    .credit {
      text-transform:uppercase;
      font-size:10px;
      font-family:arial;
      opacity:0.5
          color: #d3b876;
      text-align:center;
    }


    .iconean {
      float:left;
      width:100px;
      margin-right:5px;
      margin-bottom:5px;
    }

    .elapoint {
      width:164px;
      display:inline-block;
      padding:3px 0;
      text-transform: uppercase;
      font-size:10.5px;
      background:#915A38;
      text-align:center;
      margin-top:3px;

    }

    .blocan2 {
      background:#915A38;
      padding:20px;
      text-align:justify;
      font-size:13.5px;
      line-height:15px;
      margin-right: 6px;
    }


    .stafftexte{
      width: 200px;
      height: 50px;
      background: #d3b876;
      color: #000000;
      text-align: center;
      font-size: 12px;
      overflow: auto;
     }

    .staffimg img{
      transition: transform 5s;
      -moz-transition: -moz-transform 5s;
      -o-transition: -o-transform 5s;
      -webkit-transition: -webkit-transform 5s;
      margin-top: -50px;
    }

    .staffimg img:hover{
      display: none;
    }

    </style>          
     <div class="cadrean">
               <img style="margin:-20px;" src="http://img4.hostingpics.net/pics/62331033u5yk6.jpg" /><br /> <br />        
     <h1>
              Contexte          
     </h1>
                      
     <div class="blocan">
               <img src="http://nsm08.casimages.com/img/2016/10/27//16102705395014589514586342.jpg" style="float: left; margin-right: 10px;" />Tout commença par un bibliothécaire solitaire au milieu de ses livres et artefacts, choisi pour être le conservateur d'un lieu unique protégeant les hommes de la magie. Il pensait devoir accomplir son destin seul, jusqu'à ce que la Bibliothèque en décide autrement. Ce lieu magique, à la conscience surnaturelle, recruta alors de nouveaux membres pour aider son Conservateur à tout faire pour arrêter une organisation millénaire, qui avait toujours eu comme but de régner sur le monde magique. Grâce aux efforts de ce fameux conservateur du nom de Flynn Carson, et de ses nouveaux équipiers, la Confrérie du Serpent ne réussit qu'à ramener une infime partie de la magie dans notre monde, ce qui eu tout de même comme conséquence une recrudescence des phénomènes magiques. Cependant, cela n’était que la première étape. Leurs intentions étaient bien plus profondes. Ce fut dans le plus grand des secrets qu’ils réussirent à ressusciter douze des dieux antiques de la mythologie grecque, dans l'espoir d'atteindre leur objectif...    <a href="http://the-librarians-rpg.forumactif.org/t70-le-contexte-du-forum"><span style="color: rgb(211, 184, 118);">Lire la Suite</span></a>        
     </div>
                          
     <div class="elapoint">
              <a href="http://the-librarians-rpg.forumactif.org/t1-reglement-du-forum"><span style="color: rgb(211, 184, 118);">Règlement</span></a>          
     </div>
                          
     <div class="elapoint">
                   <a href="http://the-librarians-rpg.forumactif.org/f7-invitation-au-poste-de-bibliothecaire"><span style="color: rgb(211, 184, 118);">Postes Vacants</span></a>        
     </div>
                          
     <div class="elapoint">
             <a href="http://the-librarians-rpg.forumactif.org/t68-le-systeme-de-point-magie-et-competences"><span style="color: rgb(211, 184, 118);">Magies et Compétences </span></a>        
     </div>
                <br />          
     <div class="elapoint">
             <a href="http://the-librarians-rpg.forumactif.org/t73-la-legende-des-cristaux"><span style="color: rgb(211, 184, 118);"> La Légende</span></a>        
     </div>
                          
     <div class="elapoint">
             <a href="http://the-librarians-rpg.forumactif.org/f184-la-gazette-des-mysteres"><span style="color: rgb(211, 184, 118);">Les Quêtes</span> </a>        
     </div>
                          
     <div class="elapoint">
             <a href="http://the-librarians-rpg.forumactif.org/t139-tutoriel-pour-debutant-en-rpg"> <span style="color: rgb(211, 184, 118);">Le Tuto Débutant</span></a>        
     </div>
                          
     <table>
                        
     <tbody>
                        
     <tr>
                        
     <td>
                        
     <h1>
               Informations          
     </h1>
                        
     <div class="blocan2">
               Bonjour/Bonsoir à tous. Merci de vous intéresser à notre forum. Nous comptons déjà <span class="FORUMCOUNTUSER"></span> membres et serions ravis que vous nous rejoigniez. Notre dernière recrue "<span class="FORUMLASTUSER"></span>" à déjà prise ces marques. Pourquoi ne pas faire comme elle ? <br /><br />Ne vous inquiétez pas si vous ne connaissez absolument pas la série d'inspiration. Tout a été pensé pour que n'importe quel joueur qu'il soit débutant ou pas , connaisseur ou pas , puisse venir nous rejoindre. La quêtes du moment est <a href="http://the-librarians-rpg.forumactif.org/t131-wtf-les-toons-debarquent"><span style="color: rgb(211, 184, 118);">"Les Toons Débarquent!"</span></a>, proposer par notre admin Viviane.          
     </div>
                        
     </td>
                        
     <td>
                        
     <h1>
               Le staff          
     </h1>
     
     <div class="staffimg">
     
     <div class="stafftexte">Angie Carter<br />Fondatrice<br /> <a href="http://the-librarians-rpg.forumactif.org/profile?mode=email&u=3">Me Contacter</a>
     </div><img src="https://img11.hostingpics.net/pics/711292avapub1.jpg" alt="200,50.png" title="angie_carter" border="0" />
     </div><br /> <img src="https://img4.hostingpics.net/pics/675317libVIV.jpg" alt="200,50.png" title="viviane_de_comper" border="0" /><br /><img src="https://img4.hostingpics.net/pics/920571libEVE.jpg" alt="200,50.png" title="eve_baird" border="0" /><br /><img src="https://img11.hostingpics.net/pics/128279Phoebetonkin.jpg" alt="200,50.png" title="nate_cosby" border="0" />
     </td>
                        
     </tr>
                        
     </tbody>
                        
     </table><br />          
     <h1>
               Nous rejoindre          
     </h1><a href="http://the-librarians-rpg.forumactif.org" target="accueil"><img src="https://i58.servimg.com/u/f58/12/54/18/97/bouton12.png" alt="468,60.png" title="The Librarians RPG" border="0" /></a><br /><br />          
     <div class="credit">
               <a style="color:#d3b876;opacity:0.5;text-decoration:none;" href="http://libre-graph.forumperso.com/"> ©️ FICHE CRÉÉE PAR REIRA DE LIBRE GRAPH'</a>          
     </div>
                        
     </div>
    </center>
    </html>

    Merci d'avance a tout ceux qui voudrons biens me pointer le problème et m'expliquer




    Merci à Yah.Kempis pour la sign.



      La date/heure actuelle est Lun 23 Oct - 17:18