web-dev-qa-db-fra.com

Le survol de la souris change la position et la taille de l'image

J'essaie de faire un menu de boutons pour mon site Web et j'ai un problème avec la position de l'image au survol de la souris. C'est ce que j'ai créé jusqu'à présent http://jsfiddle.net/tNLUx/

Au survol de la souris, je veux que l'image sélectionnée grandisse et que les autres conservent leur même position, tout comme la première image ... comment puis-je faire grandir et descendre les images vers le bas au lieu de monter?

#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;
}
<img src="http://img24.imageshack.us/img24/3221/32845401.png" alt="img1" id="btnSocial" class="social1" />
<img src="http://img24.imageshack.us/img24/3221/32845401.png" alt="img1" id="btnSocial" class="social2"/>
<img src="http://img24.imageshack.us/img24/3221/32845401.png" alt="img1" id="btnSocial" class="social3"/>
<img src="http://img24.imageshack.us/img24/3221/32845401.png" alt="img1" id="btnSocial" class="social4"/>
htmlcsshover
14
iniestar

Utilisez transform: scale(x, y) pour mettre à l'échelle l'objet.
Utilisez transform: translate(x, y) pour déplacer l'objet.
Ces deux propriétés peuvent également être combinées: transform: scale(x, y) translate(x, y).

Exemple:

.btn-social {
    width: 100px;
    position: relative;
    opacity: 0.5;
    transition: 0.3s ease;
    cursor: pointer;
}

.btn-social:hover {
    opacity: 1;

    /** default is 1, scale it to 1.5 */
    transform: scale(1.5, 1.5);

    /** translate 50px from left, and 40px from top */
    /** transform: translate(50px, 40px); */

    /** combine both scale and translate */
    /** transform: scale(1.5, 1.5) translate(50px, 40px); */
}
<img src="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=c78bd457575a" class="btn-social" />
<img src="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=c78bd457575a" class="btn-social" /><br />
<img src="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=c78bd457575a" class="btn-social" />
<img src="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=c78bd457575a" class="btn-social" />
39
novalagung

Vérifiez cela http://jsfiddle.net/tNLUx/11/

Supprimé 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;

}
3
999k