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/

從CSS中刪除position: relative;

#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; 

}