Problème d'image spoiler

[Oniitsuki]

Bonjours,

J'ai un problème au niveau de la mise en place d'un code de transition. En effet, après mainte recherche infructueuse j'ai trouvé un sujet sur le code que je convoitai et qui était de cacher un texte par une image, qui défilerait sur la gauche lorsqu'on passe le curseur dessus. Une sorte d'image spoiler en somme.
Le seul problème est que le code ne semble pas vouloir marcher sur mon forum malgré quelques tentatives de bidouillage.
En effet, l'image coulisse bien mais le texte reste indéfiniment "sous" l'image, en bas et visible, et non pas caché "derrière" l'image.

Voici mes codes :

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;
  float: left;
   }
 
div.defile:hover{
  left: -120px;     // 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;
  float: left;
   }
 
div.texte {
  width: 120px;  // Ici la largeur de l'image
  height: 310px;  //Ici la hauteur de l'image
  position: absolute;
  z-index: 0;
   }

Code:

<div class="defile">
<img src="http://img194.imageshack.us/img194/2411/6yv4.jpg" alt="image defilante" /></div><div class="texte"><center><b>Perséphone R'lyeh</b>
Fondatrice
Designer</center></div>

A noter que le code html se trouve dans un menu en accordéon, peut-être que le problème viendrait de là ?

Les sujets où j'ai trouvé les codes : https://forum.forumactif.com/t355140-transition-image-texte?highlight=image+texte

Merci à ceux qui me répondront ;3.

[Invité]

Bonjour,

Moi j'aurai fait ceci :

Code:

<div><div class="defile">
        <img src="http://img194.imageshack.us/img194/2411/6yv4.jpg" alt="image defilante" /></div><div class="defile"><div class="texte"><center><b>Perséphone R'lyeh</b>
        Fondatrice
        Designer</center></div></div>

Dit moi si cela fonctionne.

Bonne journée,
Cordialement Etax.

[Oniitsuki]

Non, maintenant le texte se déplace aussi quand on passe dessus ^^".

[Invité]

Re,

Oui j'ai vue ça sur votre forum.
Je vais faire quelque petit teste sur mon forum pokémon.

Merci, je reviens faire vous dans quelques heures.
Etax.

---------------------------------------------------------------------------------------------
Alors, voilà j'ai du refaire quelque retouche au CSS pour qu'il soit plus simple d'utilisation. L'image ne bougera plus, le texte bougera encore.


le css :

Code:

        div.defile{
          position: relative;
          -moz-transition: all 10s;
          -o-transition: all 10s;
          -webkit-transition: all 10s;
          -ms-transition: all 10s;
          transition: all 10s;
          float: left;
          }
       
        div.defile:hover{
          left: -120px;    // Ici tu dois mettre la largeur de votre images
          -moz-transition: all 10s;
          -o-transition: all 10s;
          -webkit-transition: all 10s;
          -ms-transition: all 10s;
          transition: all 10s;
          float: left;
          }

        div.defile2{
          float: left; // On place votre image sur la droite
          }
       
        div.texte {
          background: black; // Couleur de fond du texte
          color: white; // Couleur du texte
          width: auto;  // Ici la largeur de votre image
          height: auto;  //Ici la hauteur de votre image
          position: absolute; // La possition du texte
          z-index: 0;
          }


Le codage :

Code:

<div class="defile2">
<img src="http://img194.imageshack.us/img194/2411/6yv4.jpg" alt="image defilante" />
</div><div class="defile"><div class="texte">
<center><b>Perséphone R'lyeh</b><br /> Fondatrice              Designer</center></div></div>

En espérant que cela vous conviens.
Etax.

[Oniitsuki]

A la base c'est l'image qui cache le taxte qui doit bouger pour le révéler xD... et le texte reste encore sur le côté. Mais merci pour cette tentative.

[MlleAlys]

Bonjour,
et quelque chose comme ça, est ce que ça fonctionne ?

Code:

<div class="texte">
    <center><b>Perséphone R'lyeh</b>
Fondatrice Designer</center>
</div>
<div class="defile">
    <img src="http://img194.imageshack.us/img194/2411/6yv4.jpg" alt="image defilante" />
</div>

Code:

div.defile {
    z-index: 10;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -webkit-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
    position: relative;
    top: -310px;  /*hauteur de l image*/
}
div.defile:hover {
    left: -120px; /*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: 120px; /*largeur de l image*/
    height: 310px;  /*hauteur de l image*/
    z-index: 2;
}

[Oniitsuki]

J'allais dire que finalement j'abandonnai l'idée de l'image spoiler mais tu as posté avant. Cela dit ça pourra toujours me servir.

J'ai testé, ça marche nickel ! Merci :3

[MlleAlys]

de rien ! =)