title: CSS mask pseudo element by parent div?
body: <p>I'm using a psuedo element to fade a gradient over another div which has an image as a background for that div. </p>
  
  <p>My html layout is like so:</p>
  
  <pre><code>&lt;div class='portfolio_thumb'&gt;
      &lt;div class='portfolio_thumb_caption'&gt;&lt;/div
  &lt;/div
  </code></pre>
  
  <p>and my CSS for those items</p>
  
  <pre><code>.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;
      }
  </code></pre>
  
  <p>Right now the gradient fades in and starts to slide, but it is shown past the parent div. I only want the gradient shown within the bounds of the portfolio_thumb div. Also, both divs in that html snippet are the same heights. Does anyone have any ideas? I'm going for this kind of approach. <a href="http://tympanus.net/Development/HoverEffectIdeas/" rel="nofollow">http://tympanus.net/Development/HoverEffectIdeas/</a></p>
  
  <p>Thanks!</p>