隱藏溢出的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。。