隐藏溢出的CSS3缩放动画

Question

我正在寻找放大悬停图像，但隐藏所有溢出的图像，溢出包含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。。