CSS3：隐藏变形效果的溢出

Question

我正在尝试在图像上制作一个简单的 CSS3 悬停效果。我正在尝试将图像的一半显示为透明。为了更容易看到问题，我将其设置为黑色。

<div class="section">
    <img src="http://placekitten.com/110/155" />
    <div class="efx" />
</div>

.section{
    width:700px;
    background-color:orange;
    height:170px;
    position:relative;
    margin:50px;
}

.section:hover .efx{
    height:155px;
}

img{
    width:110px;
    height:155px;
}

.efx{
    overflow:hidden;
    background-color: black;
    z-index: 10;
    left: -51px;
    position: absolute;
    height: 0px;
    width: 105px;
    transition: all .5s ease-in;
    transform: skew(35deg, 0deg);
    bottom:15px;   
}

如果您查看这里的小提琴http://jsfiddle.net/5ST86/，您可以看到结果是什么。以下是我想要实现的目标。

Answer 1

只需将overflow:hidden 添加到section 元素即可。

jsFiddle example

.section{
    width:700px;
    background-color:orange;
    height:170px;
    position:relative;
    margin:50px;
    overflow:hidden;
}