Html 按父div的CSS掩码伪元素？

我使用一个psuedo元素在另一个div上淡出一个渐变，这个div有一个图像作为该div的背景

我的html布局如下所示：

<div class='portfolio_thumb'>
    <div class='portfolio_thumb_caption'></div
</div

现在渐变淡入并开始滑动，但它显示在父div之后。我只希望渐变显示在portfolio_thumb div的范围内。而且，html片段中的两个div的高度相同。有人有什么想法吗？我赞成这种方法

谢谢

• 在容器上使用

  overflow:hidden

  来切断渐变

• 使用

  transform:translateY（x%）

  上下移动渐变。由于我们不创建3d动画，因此使用

  translate3d

  没有任何意义，这需要运行更多的grunt

• 过渡

  平滑地显示和隐藏覆盖

完整示例

.portfolio\u thumb{
位置：相对位置；
背景：url(http://lorempixel.com/output/animals-q-c-640-300-1.jpg);
背景尺寸：封面；
溢出：隐藏；
高度：300px；
宽度：100%；
最大宽度：840像素；
保证金：0自动；
}
投资组合大拇指投资组合大拇指描述：之前{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：线性梯度（至底部，rgba（72,76,97,0）0%，rgba（72,76,97,0.8）75%）；
内容：''；
过渡：均为0.5s；
转化：translateY（50%）；
不透明度：0；
}
.portfolio_thumb:悬停。portfolio_thumb_说明：之前{
变换：translateY（0）；
不透明度：1；
}

---

最好在CodePen或其他地方制作演示，以便人们能够正确地检查。

.portfolio_thumb {
    position: relative;
    width: 100%;
    height: 300px;
    background-size: cover;
}

    .portfolio_thumb .portfolio_thumb_caption:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
        content: '';
        opacity: 0;
        transform: translate3d(0,50%,0);
    }

    .portfolio_thumb:hover .portfolio_thumb_caption:before {
        transform: translate3d(0,0,0);
        opacity: 1;
    }