Transition Image --> texte

[Masaru]

Bonsoir à tous et à toutes,

Voilà maintenant de bonnes heures que je parcoure les pages du site pour trouver la solution à mon problème, mais je n'ai malheureusement pas trouvé le sujet qui traité de mon soucis. Je sais bien sûr que ce problème à dû être réglé maintes fois et je m'excuse d'être le millième à poser la question...

Voici donc ce que j'aimerais faire : je voudrais, lorsqu'on survole une image, que l'image défile sur la côté (droit/gauche, qu'importe) pour laisser apparaître un texte. Ce code là je voudrais l'inclure dans ma P.A, dans le Contexte plus précisément.

Spoiler:

J'aimerais donc qu'une image masque tout l'encadré Contexte et qu'un texte apparaît lorsqu'on à la survole.

Voici le code de la P.A CSS :

Spoiler:

Et voici la partie du code HTML

Spoiler:

Si vous avez besoin de la totalité du code HTML je le posterai sans soucis !

Excuse moi encore car j'imagine que ce sujet a été traité de très nombreuses fois, seulement comme dit je n'ai rien trouvé qui pourrait m'aider...

Je vous remercie d'avance ! =)

[Masaru]

Up ^^

[Izumi375]

Coucou c'est moi,

D'abord le html (je te laisse le soin de l'inclure dans ta PA):

Code:

<div class="defile">
<img src="LIEN" alt="image defilante" /></div>
<div class="texte">Ton Texte</div>

et dans le css

Code:


div.defile{
   position: relative;
  z-index: 10;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
   }

div.bloc1:hover{
  left: -100px;         // Ici tu dois mettre la largeur de l'image
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
   }

div.texte {
  width: XXpx;  // Ici la largeur de l'image
  height: XXpx;  //Ici la hauteur de l'image
  position: absolute;
  z-index: 0;


Enjoy

[Masaru]

Coucou Toi !  

Alors j'ai bien inséré ton CSS (d'ailleurs il manqué le "}" à la dernière div, du coup je l'ai ajouté ^^) et ton html... mais ça ne fonctionne pas ^^'... Dans la partie "alt="image defilante" je dois ajouter quelque chose de particulier car je l'ai laissé écrit tel quel et ça ne fonctionnait pas, j'ai essayé d'insérer le lien de l'image et ça ne fonctionnait pas non plus =/
J'ai bien ajouté les valeur manquante dans le CSS, à savoir ceci :

Code:

div.defile{
   position: relative;
  z-index: 10;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
   }
 
div.bloc1:hover{
  left: -100px;    200px;     // Ici tu dois mettre la largeur de l'image
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
   }
 
div.texte {
  width: 400px;  // Ici la largeur de l'image
  height: 400px;  //Ici la hauteur de l'image
  position: absolute;
  z-index: 0;
   }

Voilà mais ça ne fonctionne toujours pas hélas, l'image s'affiche bien dans le cadre contexte, seulement le texte s'affiche dessous et l'image ne bouge pas de place ^^'... T'as une idée de l'endroit où j'aurais pu faire une erreur ?

Merci en tout cas de m'aider =) !

[Izumi375]

Oups au temps pour moi, le code marche j'ai juste mal nommé une div (je suis un peu étourdie =P ). Pardon !

Code:

div.defile{
   position: relative;
  z-index: 10;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
   }
 
div.defile:hover{
  left: -200px;     // Ici tu dois mettre la largeur de l'image
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
   }
 
div.texte {
  width: 400px;  // Ici la largeur de l'image
  height: 400px;  //Ici la hauteur de l'image
  position: absolute;
  z-index: 0;
   }

Par contre à "left:" tu devais remplacer -100px par -200px le mettre à la suite ne veut rien dire. Désolée mon code n'était pas clair ^^
Pour ce qui est de alt c'est juste pour respecter les normes w3c

Voilà

[Masaru]

Pas de soucis

L'image glisse c'est super, seulement il y a encore un petit soucis... vraiment désolé... En fait mon texte ne s'affiche pas derrière l'image quand elle glisse, il se trouve encore sous l'image, et l'image ne le masque pas du coup ^^'... Voici un screen pour que tu comprennes mieux la situation :

Spoiler:

Spoiler:

Tu vois l'image glisse bien c'est super, mais mon texte déborde complètement vers le bas ^^'...

Tu penses que le soucis viendrait d'où ?

Encore désolé et vraiment merci de ton aide =) !!

[Izumi375]

Need le lien =p

[Masaru]

Tient voilà :



Encore merci !

[Izumi375]

ajoute

Code:

float: left;

dans div.defile ^^

[Masaru]

Oh super ! Merci ça fonctionne parfaitement !

Merci beaucoup pour ton aide !