Я пытаюсь сделать меню кнопок для моего веб-сайта, и у меня есть проблема с положением изображения при наведении курсора мыши. Это то, что я создал до сих пор http://jsfiddle.net/tNLUx/
При наведении курсора мышки я хочу, чтобы выделенное изображение росло, а остальные сохраняли свое положение, как и первое изображение... как заставить растущие и растущие изображения уменьшаться, а не двигаться вверх?
#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"/>