सीएसएस: माउस होवर बदलें छवि स्थिति और आकार

Question

मैं अपनी वेबसाइट के लिए एक बटन मेनू करने की कोशिश कर रहा हूं और मुझे माउस होवर पर छवि की स्थिति के साथ कोई समस्या है। यह मैंने अभी तक बनाया है 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; 
} 

अपना समय

चीयर्स

Answer 1

उपयोग सीएसएस 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;

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

}