CSS: Souris survole le changement de position de l'image et de la taille

Je suis en train de faire un bouton de menu pour mon site web et j'ai un problème avec la position de l'image sur la souris passe dessus. C'est ce que j'ai créé jusqu'à présent http://jsfiddle.net/tNLUx/

À la souris, je veux de l'image sélectionnée à croître et les autres gardent leur même position tout comme la première image... Comment je fais les images de croître et de se déplacer vers le bas au lieu de déplacer vers le haut?

Ici est une partie de mon css

#btnSocial{
  width:100px;
  position: relative;
  opacity: 0.5;
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
}
#btnSocial:hover{
  width: 150px;
  opacity: 1;
  -webkit-opacity: 1;
  -moz-opacity: 1;
}

Merci pour votre temps

Acclamations

OriginalL'auteur iniestar | 2013-02-20

  1. 3

    Cochez cette http://jsfiddle.net/tNLUx/11/

    Retiré position: relative; de css

    #btnSocial{
    width:100px;
    opacity: 0.5;
    -webkit-opacity: 0.5;
    -moz-opacity: 0.5;
    transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;

}
    qui donne l'effet que je veux, mais je ne peux pas contrôler l'image de la position initiale sans position:relative

    OriginalL'auteur 999k