html - CSS mask pseudo element by parent div? -

html - CSS mask pseudo element by parent div? -

i'm using psuedo element fade gradient on div has image background div.

my html layout so:

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

and css items

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

right gradient fades in , starts slide, shown past parent div. want gradient shown within bounds of portfolio_thumb div. also, both divs in html snippet same heights. have ideas? i'm going kind of approach. http://tympanus.net/development/hovereffectideas/

thanks!

use overflow: hidden on container cut-off gradient.

use transform: translatey(x%) move gradient , down. not creating 3d animations, there no point using translate3d, requires more grunt run.

the transition smoothly shows , hides overlay

complete example

class="snippet-code-css lang-css prettyprint-override">.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: 0.5s; transform: translatey(50%); opacity: 0; } .portfolio_thumb:hover .portfolio_thumb_caption:before { transform: translatey(0); opacity: 1; } class="snippet-code-html lang-html prettyprint-override"><div class='portfolio_thumb'> <div class='portfolio_thumb_caption'></div> </div>

html css pseudo-element