html - overflow hidden 的CSS3缩放动画

Question

我希望在悬停时放大图像，但要 overflow hidden 包含 div 的图像的所有溢出。因此，溢出容器外的图像的任何部分都被隐藏了。

#portfolioWrapper img{
  width: 100%;
  opacity: 1;
  -webkit-transform: scale(1,1);
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 250ms;
  -moz-transform: scale(1,1);
  -moz-transition-timing-function: ease-out;
  -moz-transition-duration: 250ms;
}

#portfolioWrapper img:hover{
  opacity: .7;
  -webkit-transform: scale(1.05,1.07);
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 250ms;
  -moz-transform: scale(1.05,1.07);
  -moz-transition-timing-function: ease-out;
  -moz-transition-duration: 250ms;
  position: relative;
  z-index: 99;
  overflow: hidden;
}

JSFiddle - http://jsfiddle.net/Md49g/ (放大到虚线边界之外的任何图像都将被隐藏

Answer 1

您需要在容器本身而不是图像上设置overflow: hidden;。

#portfolioWrapper{
    width:400px;
    border: 3px dotted green;
    overflow: hidden;
}

Working Fiddle .