CSS :: before 요소가 부모와 일치하지 않는 것 같습니다.

Question

그래서 사용자가 이미지 위로 마우스를 가져갈 때 이미지 위에 그라디언트를 표시하려고합니다. 나는 이것을 통해 다음과 같이하고있다.

내 HTML 레이아웃과 같이이다 : 해당 항목

.portfolio_thumb { 
    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 class='portfolio_thumb'> 
    <div class='portfolio_thumb_caption'></div 
</div 

내 CSS하지만 내 문제는 내가 이미지 위에 마우스를 가져 가면, 기울기가 나타나는지이지만 커버 내 전체 콘텐츠 영역 (바닥 글이나 머리글이 아님)은 그래디언트 만이 주 사업부를 넘지 않아야합니다. "portfolio_thumb div? 내가 온라인에서 보았던 사례에서 볼 수 있듯이 그렇지 않은 경우 그들은 그것을 어떻게 성취합니까?

감사! 당신이 절대적으로 부모 (또는 그랜드 부모 중 하나)에는 상대 위치 싶다면,

이

.portfolio_thumb { 
    position: relative; 
} 

의사 요소는 여전히 부모의 자식 (과 :

Answer 1

당신의 CSS이 추가 유사 요소의 정의에서 (웅대 한) 부모의 너비와 높이를 백분율로 사용), 그 (상위) 부모에 대한 위치 지정을 명시 적으로 정의해야합니다. 이것은 명시적인 위치 지정 정의가있는 직접 (상위) 상위와 컨텍스트를 설정한다는 것입니다.