Effet de transition

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

Résolu Effet de transition

Message par Joshua Muscoweqan le Sam 15 Déc 2012 - 14:02

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é Sad

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


Dernière édition par Joshua Muscoweqan le Mer 26 Déc 2012 - 14:56, édité 1 fois

Joshua Muscoweqan
Nouveau membre

Masculin
Messages : 14
Inscrit(e) le : 23/09/2012

http://justice-will-prevail.asiat-world.com
Joshua Muscoweqan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet de transition

Message par Joshua Muscoweqan le Ven 21 Déc 2012 - 17:47

Up ?

Joshua Muscoweqan
Nouveau membre

Masculin
Messages : 14
Inscrit(e) le : 23/09/2012

http://justice-will-prevail.asiat-world.com
Joshua Muscoweqan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet de transition

Message par Ea le Ven 21 Déc 2012 - 18:02

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.

Ea
Aidactif
Aidactif

Messages : 23447
Inscrit(e) le : 04/04/2008

Ea 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