Transition Image --> texte

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

Résolu Transition Image --> texte

Message par Masaru le Ven 26 Juil 2013 - 1:07

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:

Code:
.haut{
background-color: #dfbff9;
 border-right: 1px solid #53087e;color:#53087e;
border-left: 1px solid #53087e;color:#53087e;
border-top: 1px solid #53087e;color:#53087e;
padding:5px;
font-family: Amatic SC, French Script MT;
font-size:20px;
text-align:center;
}

.titrepa{
text-align:center;
  padding: 3px;
  background-color: #;
-moz-border-radius:8px; /* Arrondir cadre */
-webkit-border-radius:8px;
border-radius:8px;
border:3px solid #03a370;
}
.fondpage {
  background-color: #
text-align:justify;
  padding: 5px;
  margin: 5px;
-moz-border-radius:8px; /* Arrondir cadre */
-webkit-border-radius:8px;
border-radius:8px;
border:3px solid #03a370;
}

.fondnouv {
 height:200px;
text-align:justify;
  padding: 5px;
  margin: 5px;
-moz-border-radius:8px; /* Arrondir cadre */
-webkit-border-radius:8px;
border-radius:8px;
border:3px solid #03a370;
}

.fondcontexte {
 height:400px;
  overflow:auto;
text-align:justify;
  padding: 5px;
  margin: 5px;
-moz-border-radius:8px; /* Arrondir cadre */
-webkit-border-radius:8px;
border-radius:8px;
border:3px solid #03a370;
}

Et voici la partie du code HTML

Spoiler:

Code:
<td width="40%"><div class="fondcontexte"><div class="fondpage"><div class="haut">Le Contexte</div></div>

Bla bla bla

</div>

    </td>

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 ! =)


Dernière édition par Masaru le Dim 28 Juil 2013 - 1:49, édité 2 fois

Masaru
Nouveau membre

Messages : 16
Inscrit(e) le : 26/07/2013

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

Résolu Re: Transition Image --> texte

Message par Masaru le Ven 26 Juil 2013 - 22:54

Up ^^

Masaru
Nouveau membre

Messages : 16
Inscrit(e) le : 26/07/2013

Masaru a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Transition Image --> texte

Message par Izumi375 le Sam 27 Juil 2013 - 0:44

Coucou c'est moi, Mr. Green

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 pig

Izumi375
****

Féminin
Messages : 318
Inscrit(e) le : 31/08/2009

http://keikoku.forumpro.fr
Izumi375 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition Image --> texte

Message par Masaru le Sam 27 Juil 2013 - 21:57

Coucou Toi ! Very Happy 

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 =) !

Masaru
Nouveau membre

Messages : 16
Inscrit(e) le : 26/07/2013

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

Résolu Re: Transition Image --> texte

Message par Izumi375 le Dim 28 Juil 2013 - 0:59

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 Wink

Voilà pig

Izumi375
****

Féminin
Messages : 318
Inscrit(e) le : 31/08/2009

http://keikoku.forumpro.fr
Izumi375 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition Image --> texte

Message par Masaru le Dim 28 Juil 2013 - 1:22

Pas de soucis Razz

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 =) !!

Masaru
Nouveau membre

Messages : 16
Inscrit(e) le : 26/07/2013

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

Résolu Re: Transition Image --> texte

Message par Izumi375 le Dim 28 Juil 2013 - 1:24

Need le lien =p

Izumi375
****

Féminin
Messages : 318
Inscrit(e) le : 31/08/2009

http://keikoku.forumpro.fr
Izumi375 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition Image --> texte

Message par Masaru le Dim 28 Juil 2013 - 1:27

Tient voilà :



Encore merci !


Dernière édition par Masaru le Dim 28 Juil 2013 - 1:49, édité 1 fois

Masaru
Nouveau membre

Messages : 16
Inscrit(e) le : 26/07/2013

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

Résolu Re: Transition Image --> texte

Message par Izumi375 le Dim 28 Juil 2013 - 1:45

ajoute

Code:
float: left;

dans div.defile ^^

Izumi375
****

Féminin
Messages : 318
Inscrit(e) le : 31/08/2009

http://keikoku.forumpro.fr
Izumi375 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition Image --> texte

Message par Masaru le Dim 28 Juil 2013 - 1:48

Oh super ! Merci ça fonctionne parfaitement !

Merci beaucoup pour ton aide !

Masaru
Nouveau membre

Messages : 16
Inscrit(e) le : 26/07/2013

Masaru 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