Problème d'image spoiler

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

Résolu Problème d'image spoiler

Message par Oniitsuki le Mar 30 Juil 2013 - 15:16

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 : http://forum.forumactif.com/t355140-transition-image-texte?highlight=image+texte

Merci à ceux qui me répondront ;3.


Dernière édition par Oniitsuki le Ven 2 Aoû 2013 - 17:42, édité 2 fois

Oniitsuki
Nouveau membre

Féminin
Messages : 29
Inscrit(e) le : 26/02/2010

http://pokemon-impact.forumactif.org/
Oniitsuki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'image spoiler

Message par Invité le Mar 30 Juil 2013 - 16:26

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.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'image spoiler

Message par Oniitsuki le Mar 30 Juil 2013 - 17:41

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

Oniitsuki
Nouveau membre

Féminin
Messages : 29
Inscrit(e) le : 26/02/2010

http://pokemon-impact.forumactif.org/
Oniitsuki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'image spoiler

Message par Invité le Jeu 1 Aoû 2013 - 9:27

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.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'image spoiler

Message par Oniitsuki le Ven 2 Aoû 2013 - 15:23

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.

Oniitsuki
Nouveau membre

Féminin
Messages : 29
Inscrit(e) le : 26/02/2010

http://pokemon-impact.forumactif.org/
Oniitsuki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'image spoiler

Message par MlleAlys le Ven 2 Aoû 2013 - 15:56

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

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'image spoiler

Message par Oniitsuki le Ven 2 Aoû 2013 - 17:42

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

Oniitsuki
Nouveau membre

Féminin
Messages : 29
Inscrit(e) le : 26/02/2010

http://pokemon-impact.forumactif.org/
Oniitsuki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'image spoiler

Message par MlleAlys le Ven 2 Aoû 2013 - 17:48

de rien ! =)

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys 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