如何讓img：懸停在頁面邊界內？

Question

我有這樣一段代碼：

<style> 
.zoomimg img{ 
    margin-top:2px; 
    margin-bottom:2px; 
    margin-right: 70px; 
    margin-left: 4px; 
    height:180px; 
    width:520px; 
    -moz-transition:-moz-transform 0.3s ease-in; 
    -webkit-transition:-webkit-transform 0.3s ease-in; 
    -o-transition:-o-transform 0.3s ease-in; 
} 
.zoomimg img:hover{ 
    opacity: 0.8; 
    filter: alpha(opacity=40); 
    -moz-transform:scale(1.5); 
    -webkit-transform:scale(1.5); 
    -o-transform:scale(1.5); 
} 
</style> 

現在它的作用是巨大的。但是......當它放大時，會放大最右邊的列和其中的圖片。 結果，網站變得更寬...

但我不想那樣。

我該如何編碼，以便懸停放大移動到左側。分別和它不擴大當前的瀏覽器頁面？

Answer 1

#container { 
 
    border: 2px solid red; 
 
} 
 
.zoomimg img { 
 
    margin-top: 2px; 
 
    margin-bottom: 2px; 
 
    margin-right: 70px; 
 
    margin-left: 4px; 
 
    height: 180px; 
 
    width: 520px; 
 
    overflow: hidden; 
 
    border: 2px solid black; 
 
    -moz-transition: -moz-transform 0.3s ease-in; 
 
    -webkit-transition: -webkit-transform 0.3s ease-in; 
 
    -o-transition: -o-transform 0.3s ease-in; 
 
    transition: transform 0.3s ease-in; 
 
} 
 
.zoomimg img:hover { 
 
    opacity: 0.8; 
 
    filter: alpha(opacity=40); 
 
    -moz-transform: scale(1.5); 
 
    -webkit-transform: scale(1.5); 
 
    -o-transform: scale(1.5); 
 
    transform: scale(1.5); 
 
}

<div id="container"> 
 
    <div class="zoomimg"> 
 
    <img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg" /> 
 
    </div> 
 
</div>