Question

我正在使用一个伪元素来淡化另一个div的渐变，这个div有一个图像作为该div的背景。

我的html布局是这样的：

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

和我的那些项目的CSS

.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;
    }

现在渐变淡入并开始滑动，但它显示在父div之后。我只想要在portfolio_thumb div的范围内显示的渐变。此外，该html代码段中的两个div都是相同的高度。有没有人有任何想法？我正在采取这种方法。 http://tympanus.net/Development/HoverEffectIdeas/

谢谢！

Answer 1

在容器上使用overflow: hidden来切断渐变。
使用transform: translateY(x%)上下移动渐变。由于我们没有创建3D动画，因此使用translate3d毫无意义，这需要更多的咕噜声才能运行。
transition可以顺畅地显示和隐藏叠加层

完整示例

.portfolio_thumb {
  position: relative;
  background: url(http://lorempixel.com/output/animals-q-c-640-300-1.jpg);
  background-size: cover;
  overflow: hidden;
  height: 300px;
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
}
.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: '';
  transition: all 0.5s;
  transform: translateY(50%);
  opacity: 0;
}
.portfolio_thumb:hover .portfolio_thumb_caption:before {
  transform: translateY(0);
  opacity: 1;
}

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

父div的CSS掩码伪元素？

1 个答案:

完整示例