CSS: Vị trí và kích thước hình ảnh thay đổi di chuột di chuột

Question

Tôi đang cố gắng thực hiện trình đơn nút cho trang web của mình và tôi gặp sự cố với vị trí của hình ảnh khi di chuột. Đây là những gì tôi đã tạo cho đến nay http://jsfiddle.net/tNLUx/

Khi di chuột qua, tôi muốn hình ảnh được chọn tăng lên và những hình ảnh khác giữ nguyên vị trí giống như hình ảnh đầu tiên ... Làm cách nào để làm cho hình ảnh xuống và phát triển xuống thay vì di chuyển lên?

Dưới đây là một số css của tôi

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

Cảm ơn thời gian của bạn

Cheers

Answer 1

Sử dụng css transform: scale(x, y);. Ví dụ:

.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

Kiểm tra này http://jsfiddle.net/tNLUx/11/

Removed position: relative; từ 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; 

}