Problème d'image spoiler
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Problème d'image spoiler
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 :
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.
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.
Dernière édition par Oniitsuki le Ven 2 Aoû 2013 - 17:42, édité 2 fois
Re: Problème d'image spoiler
Bonjour,
Moi j'aurai fait ceci :
Dit moi si cela fonctionne.
Bonne journée,
Cordialement Etax.
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é
Re: Problème d'image spoiler
Non, maintenant le texte se déplace aussi quand on passe dessus ^^".
Re: Problème d'image spoiler
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 :
Le codage :
En espérant que cela vous conviens.
Etax.
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é
Re: Problème d'image spoiler
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.
Re: Problème d'image spoiler
Bonjour,
et quelque chose comme ça, est ce que ça fonctionne ?
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- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Problème d'image spoiler
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
J'ai testé, ça marche nickel ! Merci :3
Re: Problème d'image spoiler
de rien ! =)
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Sujets similaires
» Problème avec la disposition dimage
» Problème spoiler !! :(
» Problème de spoiler
» Problème spoiler
» Problème Spoiler
» Problème spoiler !! :(
» Problème de spoiler
» Problème spoiler
» Problème Spoiler
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum