如何保持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>