CSS: Положение и размер изображения наведения мышки

Question

Я пытаюсь сделать меню кнопок для своего веб-сайта, и у меня проблема с положением изображения при наведении мыши. Это то, что я создал до сих пор http://jsfiddle.net/tNLUx/

На мышь, я хочу, чтобы выбранное изображение увеличивалось, а остальные сохраняли одно и то же положение, как и первое изображение ... Как создать уменьшенные изображения для увеличения и перемещения вниз, а не двигаться вверх?

Вот некоторые из моих 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; 
} 

Спасибо за ваше время

Приветствий

Answer 1

Используйте CSS transform: scale(x, y);. Пример:

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

 
.btn-social:hover { 
 
    transform: scale(1.5, 1.5); /** default is 1, scale it to 1.5 */ 
 
    opacity: 1; 
 
}

<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" />

Answer 2

Проверить это http://jsfiddle.net/tNLUx/11/

Удалены position: relative; из 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; 

}