Effet de transition

[Joshua Muscoweqan]

Bonjour !
Je poste ici car j'ai un petit problème. J'ai récemment découvert la balise "transition" qui m'a permis de faire s'écarter l'avatar de mes membres au passage de la souris pour découvrir les infos du profil. (voir son mon forumtest)
Du coup j'ai voulu faire la même chose sur ma PA mais ça n'a pas marché... !

Je voulais que ce qui est encadré en rouge :

Spoiler:

s'écarte au passage de la souris pour découvrir le bloc des prédéfinis.
J'ai essayé le même type de codage mais ça n'a pas marché

Voici le code de ma PA pour le bloc concerné :

Code:

<div style="width : 500px; height : 233px; border-radius : 10px; padding : 10px; border-top : 5px solid #b08143; border-bottom : 5px solid #b08143; background-color : white; text-align : center; font-family : georgia; font-size : 16px;">
<object type="application/x-shockwave-flash" data="http://www.archive-host.com/dewplayer-vol.swf?mp3=http://www.archive-host.com/files/1805957/28a56acfebb9c5a1c14aae5ffbe18bdb3b7df00f/sweeToxic_-_SuG_PV_Full-www_flvto_com.mp3&autostart=0&autoreplay=1&showtime=1&volume=50" width="240" height="20"><param name="movie" value="http://www.archive-host.com/dewplayer-vol.swf?mp3=http://www.archive-host.com/files/1805957/28a56acfebb9c5a1c14aae5ffbe18bdb3b7df00f/sweeToxic_-_SuG_PV_Full-www_flvto_com.mp3&autostart=0&autoreplay=1&showtime=1&volume=50" /></object><br/><br/><div style="font-variant : normal; font-size : 11px; line-height : 12px; text-align : justify;"><strong>[25.11] Nouveau design !</strong><br/>Les feuilles mortes tombent au sol et le forum se refait une beauté. Voici le design un peu tardif de la saison, qui devrait je l'espère marquer une grande montée de l'activité de ce forum un peu mort depuis son lancement. Je ne cesse de le répéter mais <i>faîtes tourner l'adresse à vos amis</i> pour nous faire connaître, sinon on va vite s'ennuyer ! De mon côté je continue la pub et les demandes de partenariats pour attirer de nouvelles têtes, ce à quoi les top-sites devraient aussi nous aider. N'hésitez d'ailleurs pas à voter toutes les deux heures ! <br/>Les membres inactifs ont été supprimés, le nombre de membres est donc à présent de 3 sans compter le Big Boss qui devient par ailleurs un compte Personnage Non Jouable et ne servira désormais plus qu'à faire des annonces. Aussi, c'est désormais Seth qui gérera le forum, validera les fiches et enverra au coin les petits vilains vilains. Voilà pour les news de ce mois-ci ! Commentez le nouveau design ici !<br/><br/><div style="padding-left : 300px;"><i>The Big Boss.</i></div></div></div>

et voilà le code du bloc que je veux placer en dessous :

Code:


<center><span class="imgopa"><img src="http://nimga.fr/f/0J0pV.gif" border="0" alt="" /></span> <span class="imgopa"><img src="http://nimga.fr/f/0J0pV.gif" border="0" alt="" /></span> <span class="imgopa"><img src="http://nimga.fr/f/0J0pV.gif" border="0" alt="" /></span></center>

Voilà, donc si quelqu'un sait comment faire ça je suis preneuse ! :3

[Joshua Muscoweqan]

Up ?

[Ea]

Bonjour,


Je n'ai pas essayé mais vu comment ça se passe pour vos profils j'imagine qu'il vous faudra un code du style :

Code:

<div class="trans_container">
  <div class="trans_elem">
    <div style="width : 500px; height : 233px; border-radius : 10px; padding : 10px; border-top : 5px solid #b08143; border-bottom : 5px solid #b08143; background-color : white; text-align : center; font-family : georgia; font-size : 16px;">
      <object type="application/x-shockwave-flash" data="http://www.archive-host.com/dewplayer-vol.swf?mp3=http://www.archive-host.com/files/1805957/28a56acfebb9c5a1c14aae5ffbe18bdb3b7df00f/sweeToxic_-_SuG_PV_Full-www_flvto_com.mp3&autostart=0&autoreplay=1&showtime=1&volume=50" width="240" height="20">
        <param name="movie" value="http://www.archive-host.com/dewplayer-vol.swf?mp3=http://www.archive-host.com/files/1805957/28a56acfebb9c5a1c14aae5ffbe18bdb3b7df00f/sweeToxic_-_SuG_PV_Full-www_flvto_com.mp3&autostart=0&autoreplay=1&showtime=1&volume=50" />
      </object>
      <br/><br/>
      <div style="font-variant : normal; font-size : 11px; line-height : 12px; text-align : justify;">
        <strong>[25.11] Nouveau design !</strong><br/>Les feuilles mortes tombent au sol et le forum se refait une beauté. Voici le design un peu tardif de la saison, qui devrait je l'espère marquer une grande montée de l'activité de ce forum un peu mort depuis son lancement. Je ne cesse de le répéter mais<i>faîtes tourner l'adresse à vos amis</i>pour nous faire connaître, sinon on va vite s'ennuyer ! De mon côté je continue la pub et les demandes de partenariats pour attirer de nouvelles têtes, ce à quoi les top-sites devraient aussi nous aider. N'hésitez d'ailleurs pas à voter toutes les deux heures !<br/>Les membres inactifs ont été supprimés, le nombre de membres est donc à présent de 3 sans compter le Big Boss qui devient par ailleurs un compte Personnage Non Jouable et ne servira désormais plus qu'à faire des annonces. Aussi, c'est désormais Seth qui gérera le forum, validera les fiches et enverra au coin les petits vilains vilains. Voilà pour les news de ce mois-ci ! Commentez le nouveau design ici !<br/><br/>
        <div style="padding-left : 300px;">
          <i>The Big Boss.</i>
        </div>
      </div>
    </div>
  </div>
  <center>
    <span class="imgopa"><img src="http://nimga.fr/f/0J0pV.gif" border="0" alt="" /></span><span class="imgopa"><img src="http://nimga.fr/f/0J0pV.gif" border="0" alt="" /></span><span class="imgopa"><img src="http://nimga.fr/f/0J0pV.gif" border="0" alt="" /></span>
  </center>
</div>

Et un code css du style :

Code:

.trans_container {
  position: relative;
}
.trans_elem {
  position: absolute;
  top: 0; left: 0;
  -webkit-transition: all 1s ease;
  -moz- transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.trans_container:hover .trans_elem {
  left: 100%;
}

Cordialement.