image qui part au passage de la souris

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu image qui part au passage de la souris

Message par mlle le Mer 1 Jan 2014 - 16:08

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 I love you
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 Embarassed

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;
}


Dernière édition par mlle le Ven 17 Jan 2014 - 18:56, édité 1 fois

mlle
***

Messages : 106
Inscrit(e) le : 07/10/2012

http://concordia-u.forumgratuit.ch/
mlle a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image qui part au passage de la souris

Message par stefou le Jeu 2 Jan 2014 - 16:38

Bonjour,

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

stefou
*****

Masculin
Messages : 896
Inscrit(e) le : 24/11/2009

http://discussansfrontieres.forumgratuit.fr/forum
stefou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image qui part au passage de la souris

Message par mlle le Jeu 2 Jan 2014 - 16:54

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

mlle
***

Messages : 106
Inscrit(e) le : 07/10/2012

http://concordia-u.forumgratuit.ch/
mlle a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image qui part au passage de la souris

Message par stefou le Jeu 2 Jan 2014 - 17:45

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.

stefou
*****

Masculin
Messages : 896
Inscrit(e) le : 24/11/2009

http://discussansfrontieres.forumgratuit.fr/forum
stefou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image qui part au passage de la souris

Message par mlle le Jeu 2 Jan 2014 - 23:59

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
***

Messages : 106
Inscrit(e) le : 07/10/2012

http://concordia-u.forumgratuit.ch/
mlle a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image qui part au passage de la souris

Message par mlle le Mer 8 Jan 2014 - 22:26

Up ?

mlle
***

Messages : 106
Inscrit(e) le : 07/10/2012

http://concordia-u.forumgratuit.ch/
mlle a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image qui part au passage de la souris

Message par [Nihil] le Mer 8 Jan 2014 - 23:12

Si tu rajoutes ceci dans ton CSS, est ce mieux Smile ?
Code:
.cadreliens:hover .captjack { opacity: 1;}

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image qui part au passage de la souris

Message par mlle le Sam 11 Jan 2014 - 20:13

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

mlle
***

Messages : 106
Inscrit(e) le : 07/10/2012

http://concordia-u.forumgratuit.ch/
mlle a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image qui part au passage de la souris

Message par mlle le Ven 17 Jan 2014 - 15:32

up please ? Sad

mlle
***

Messages : 106
Inscrit(e) le : 07/10/2012

http://concordia-u.forumgratuit.ch/
mlle a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image qui part au passage de la souris

Message par [Nihil] le Ven 17 Jan 2014 - 18:51

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 */
}

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image qui part au passage de la souris

Message par mlle le Ven 17 Jan 2014 - 18:56

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

mlle
***

Messages : 106
Inscrit(e) le : 07/10/2012

http://concordia-u.forumgratuit.ch/
mlle a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum