Avatar transition laissant apparent les infos du profil au survol de la souris

[Britney]

Bonjour,

J'aimerais que lorsque l'on survole l'avatar d'un membre celui-ci si déplace sur la droite et laisse apparent les informations du profil.

Pour vous montrer le résultat souhaité :

http://become-an-idol.forumactif.com/t441-event-n2

J'ai suivi ce tutoriel (lien) sauf qu'il ne marche qu'à moitié. J'ai bel et bien les informations du profil qui s'affichent lors du survol de la souris sauf que l'effet est un simple fondu...

J'ai repris le code du templates dans le tutoriel ci-dessus et voici mon code CSS :

Code:

.avatar_mess
{
  display: block;
  width: 200px;
  height: 320px;
  margin-left: -1px;
  margin-right: 1px;
  box-shadow: 0px 0px 6px #000000;
  -moz-box-shadow: 0px 0px 6px #000000;
  -o-box-shadow: 0px 0px 6px #000000;
  -htm-box-shadow: 0px 0px 6px #000000;
  -webkit-box-shadow: 0px 0px 6px #000000;
 
  overflow: hidden;
  background: #B5B5B5;
  border: 5px solid #3e1d19;
 
   
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 11s;
-webkit-transition: 1s;
}

.profil_mess
{
  position: absolute;
  display: block;
  width: 190px;
  height: 310px;
  margin: auto;
  padding: 5px;
  overflow: auto;
  background: #6b664e;
  color: #c5bea0;
  font-size: 11px;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
   
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.profil_mess:hover
{
  opacity: 1;
  -moz-opacity: 1;
  -khtml-opacity: 1;
  filter: alpha(opacity=100);
 
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.pseudo_mess
{
  display: block;
  position: relative;
  z-index: 2;
  width: 181px;
  margin-top: -10px;
  margin-left: 10px;
  text-align: center;
  font-size: 24px;
  font-family: courier;
  font-weight: bold;
  text-shadow: 0px 0px 3px #c5bea0;
  background: #811414;
  padding-top: 5px;
  border-left: 3px solid #371e1a;
  border-right: 3px solid #371e1a;
  border-top: 1px solid #371e1a;
  border-bottom: 1px solid #371e1a;
  box-shadow: 0px 0px 3px #000000;
  -moz-box-shadow: 0px 0px 3px #000000;
  -o-box-shadow: 0px 0px 3px #000000;
  -htm-box-shadow: 0px 0px 3px #000000;
  -webkit-box-shadow: 0px 0px 3px #000000;
}

Si vous pouviez m'aider ce serait très gentil.

[Xibition]

Donc si je comprend bien tu ne veux que changer l'effet lors du survol ?

[Britney]

Ce serait un bon début oui car pour l'instant mon problème c'est juste l'effet. Je veux un défilement de l'avatar sur la droite et non un fondu. ^^

[Xibition]

vous pouvez mettre ça par exemple : (ca marche sous chrome)

Code:


.avatar_mess {
-webkit-transition: all 2s ease 0;
background: #272726;
box-shadow: 0 0 6px black;
display: block;
height: 320px;
margin-right: 10px;
overflow: hidden;
transform: all;
transition: 1s;
width: 200px;
}
.avatar_mess:hover {
-webkit-transition: all 2s ease 0;
transform: all;
transition: 1s;
width: 0;
}
.profil_mess {
-webkit-transition: all 2s ease 0;
background: #6B664E;
color: #C5BEA0;
display: block;
filter: alpha(opacity=0);
font-size: 11px;
height: 310px;
overflow: auto;
padding: 5px;
position: absolute;
transform: all;
transition: 1s;
width: 190px;
  opacity: 0;
}
.profil_mess:hover {
  opacity: 1;
-webkit-transition: all 2s ease 0;
filter: alpha(opacity=100);
transform: all;
transition: 1s;
}
.pseudo_mess
{
  display: block;
  position: relative;
  z-index: 2;
  width: 190px;
  margin-top: -15px;
  margin-left: 10px;
  text-align: center;
  font-size: 18px;
  font-family: courier;
  font-weight: bold;
  text-shadow: 0px 0px 3px #c5bea0;
  background: #94855c;
  padding-top: 5px;
  border-left: 3px solid #371e1a;
  border-right: 3px solid #371e1a;
  border-top: 1px solid #371e1a;
  border-bottom: 1px solid #371e1a;
  box-shadow: 0px 0px 3px #000000;
  -moz-box-shadow: 0px 0px 3px #000000;
  -o-box-shadow: 0px 0px 3px #000000;
  -htm-box-shadow: 0px 0px 3px #000000;
  -webkit-box-shadow: 0px 0px 3px #000000;
}

Ce n'est pas exactement pareil que sur le forum voulu, mais vaut mieux ne pas faire du copié collé.

[Britney]

Merci mais ce n'est pas vraiment ce que je souhaite, l'effet est top mais c'est l'avatar qui doit disposer de cet effet.

Vous savez s'il est possible d'y ajouter des bordures et de centrer le pseudo par rapport au bloc ?

[Xibition]

J'ai pas compris comment l'avatar reste fixe ? vous avez bien ceci ? http://pooop-s.forumgratuit.org/t5-foofo-test?tt=1

pour les bordures oui biensur que vous pouvez en ajouter, vous placez ce code ou vous voulez, vous pouvez changer la taille et couleur :

Code:

border: 3px solid black; /*3px > la taille - solid > la forme - black > la couleur, vous pouvez utiliser les codes couleurs #ffffff*/

pour le pseudo vous modifier cette partie à votre guise, moi je l'ai centré :

Code:

.pseudo_mess
{
  display: block;
  position: relative;
  z-index: 2;
  width: 190px;
  margin-top: -15px;
  margin-left: 5px;
  text-align: center;
  font-size: 18px;
  font-family: courier;
  font-weight: bold;
  text-shadow: 0px 0px 3px #c5bea0;
  background: #94855c;
  padding-top: 5px;
  border-left: 3px solid #371e1a;
  border-right: 3px solid #371e1a;
  border-top: 1px solid #371e1a;
  border-bottom: 1px solid #371e1a;
  box-shadow: 0px 0px 3px #000000;
  -moz-box-shadow: 0px 0px 3px #000000;
  -o-box-shadow: 0px 0px 3px #000000;
  -htm-box-shadow: 0px 0px 3px #000000;
  -webkit-box-shadow: 0px 0px 3px #000000;
}

[Britney]

Regardez ce que ça fait sur mon forum test :

http://testtestyahya.lebonforum.com/t2-eeeeeeeeeeeeeeeeeeee

Or sur le forum :

http://become-an-idol.forumactif.com/t441-event-n2

c'est l'avatar qui défile alors que sur le mien je ne saurais l'expliquer.

[bush76]

excuser moi de m'incruster ,mais faut il modifier les template ou simplement du CSS ???

[Britney]

Il y a quelque chose à modifier dans les templates oui.

[tupac]

Bonsoir

Bush: votre version ne gère pas les templates et pour l'instant aucune solution n'existe pour faire cette effet en phpbb3

Britney: Ce code na rien a voir avec celui donné dans le sujet que vous nous avez présenté mais l'effet reste le même.

Remplacer votre template par celui-la.

Spoiler:

Puis placer le code suivant dans votre feuille de style css.

Spoiler:

[Britney]

Un grand merci tupac, ça marche du tonnerre et ce du premier coup !