image qui part au passage de la souris

[mlle]

j'aimerais avoir une image sur mon codage de catégorie, de façon à se que quand nous passions la souris sur l'image elle se retire et apparaisse les liens du forums
est-ce qu'il serait possible d'avoir un peu d'aide pour se résultat ? j'ai de la peine à avancer avec mon code

mon code de catégorie

Code:

<table>
   
   <tbody>
      <tr>
         
         <td>
            
            <div class="cadreliens">
                <br /> → <a href="http://en-chantier.forumgratuit.ch/t91-dream-team">staff</a><br />→ <a href="http://en-chantier.forumgratuit.ch/t90-contexte">contexte</a><br />→ <a href="http://en-chantier.forumgratuit.ch/t89-reglement">règlement</a><br />→ <a href="http://en-chantier.forumgratuit.ch/t92-groupe">groupe</a>
            </div>
            
         </td>
         
         <td>
            
            <div class="cadrecat">
                <strong>AVANT TOUT ❖</strong> contexte, règlement, c'est ici que vous trouverez le nécessaire au bon fonctionnement de votre personnage. n'oublions pas qu'il est fortement conseillé, voire obligatoire, de lire tout ce qui s'y trouve pour éviter les éventuelles bavures.
            </div>
            
         </td>
         
      </tr>
      
   </tbody>
</table>

mon css :

Code:

/*CATEGORIES*/
.secondarytitle {
  background: url('http://img15.hostingpics.net/pics/902036hautcat.png') no-repeat;
  width: 820px;  /* largeur de ton image en pixels */
  height: 180px;  /* hauteur de ton image en pixels */
}
.derniersmess {
  width: 170px;
  height: 80px;
  padding: 2px; text-align: center;
  font-size: 11px;
  line-height: 11px;
  overflow: auto;
  background-color: #FFE6CC;
}

.sujetmess {
  width: 170px;
  font-size: 10px;
  line-height: 10px;
  text-align: center;
  padding: 2px;
  text-transform: lowercase;
  background-color: #f8efe0;
  border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px;
}
.cadrecat {
  width: 340px;
  height: 100px;
  border: 1px solid #edd1b6;
  background-color: #f9edd9;
  padding: 10px;
  margin-top: -10px;
  overflow: auto;
  font-size:10px;
  line-height: 10px;
  text-align: justify;
border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px;
}

.cadreliens {
  height: 98px;
  width: 120px;
  overflow: auto;
  margin-left: 35px;
  background-color: #f9edd9;
  border: 1px solid #edd1b6;
  padding: 10px 2px 10px 10px;
  text-transform: uppercase;
  font-size: 11px;
  line-height: 11px;
  opacity: 1;
  margin-top: -10px;
 border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px;
}

.secondarytitle {
  text-align: right;
  text-transform: uppercase;
  font-family: courier;
  font-size: 25px;
  margin-right: 10px;
  letter-spacing: 1px;
}
.forumlink {
font-size: 32px;
font-family: 'Great Vibes', cursive;
text-transform: lowercase;
  letter-spacing: -1px;
  text-shadow: 0px 0px 4px white;
  padding-left: 8px;
  margin-left: 25px;
}

[stefou]

Bonjour,

C'est ceci que vous souhaitez ? --> Forum exemple (voir les images partenariat)

[mlle]

bonjour ^^
oui exactement comme ça, mais dans l'autre sens l'image partant vers le haut **

[stefou]

Regardez à partir d'ICI si vous arrivez à ce que vous souhaitez

Remplacer dans le java left par top ou bottom pour que l'image parte vers le bas ou vers le haut.

[mlle]

j'ai essayé mais ça ne marche pas :s
j'ai essayé quelque chose d'autre, mais l'image ne s'enlève pas *o*

mon html

Code:

<table>
   
   <tbody>
      <tr>
         
         <td>
            
            <div class="cadreliens">
               <div class="captjack">
                   <br /> → <a href="http://en-chantier.forumgratuit.ch/t91-dream-team">staff</a><br />→ <a href="http://en-chantier.forumgratuit.ch/t90-contexte">contexte</a><br />→ <a href="http://en-chantier.forumgratuit.ch/t89-reglement">règlement</a><br />→ <a href="http://en-chantier.forumgratuit.ch/t92-groupe">groupe</a>
               </div>
               
            </div>

mon css :

Code:

.captjack {
  height:80px;
  width: 100px;
  opacity: 0.0;
  transition-duration: 1s;
  -o-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -webkit-transition-duration: 1s;
}
.cadreliens {
  height: 98px;
  width: 120px;
  overflow: auto;
  margin-left: 35px;
  background-image:url(http://31.media.tumblr.com/c54166405a25ad838ec6cfa0a6b86a38/tumblr_mrugtkoTvx1ry3fl0o8_r1_250.gif);
  border: 1px solid #edd1b6;
  padding: 10px 2px 10px 10px;
  text-transform: uppercase;
  font-size: 11px;
  line-height: 11px;
  opacity: 1;
  margin-top: -10px;
 border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px;
}

[mlle]

Up ?

[[Nihil]]

Si tu rajoutes ceci dans ton CSS, est ce mieux ?

Code:

.cadreliens:hover .captjack { opacity: 1;}

[mlle]

bonjour
merci beaucoup de ton aide,
le texte apparais, mais cey le contraire que je voudrais que l'image disparaisse

[mlle]

up please ?

[[Nihil]]

En rajoutant en plus une couleur de fond à .captjack, est ce que c'est mieux ?

Code:

.captjack {
  height:80px;
  width: 100px;
  opacity: 0.0;
  transition-duration: 1s;
  -o-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -webkit-transition-duration: 1s;
 background: green; /* couleur de fond */
}

[mlle]

oh ouii ça me vas très bien *-*
merci beaucoup de ton aide, cey parfait