CSS 전환 호버 그라디언트

Question

전이 효과에 대해 하나의 질문이 있습니다. 내가 만든이 fiddle

호버 전환 효과를 추가하고 싶습니다. 하지만 작동하지 않습니다. 누구나 나를 도울 수 있니?

.h_grid_2 .gradient_c_grd_2 { 
    position:absolute; 
    width:384px; 
    height:200px; 
    z-index:1; 
    background: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); 
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); 
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); 
    -webkit-transition: 1s all; 
    transition: 1s all; 
} 

.h_grid_2:hover .gradient_c_grd_2 { 
    position:absolute; 
    width:384px; 
    height:200px; 
    z-index:1; 
    background: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255 255, 255, 0.2)); 
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0, 0), rgba(255, 255, 255, 0.2)); 
    background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)); 
    -webkit-transition: 1s all; 
    transition: 1s all; 
} 

Answer 1

체크 아웃 내 방법 : http://jsfiddle.net/gqLgu7jw/1/

아이디어는 다음과 같은 스타일을 다른 사업부 (.gradient_c_grd_3)를 추가하고 사용하는 것입니다

.h_grid_2:hover .gradient_c_grd_3{ 
    opacity: 1; 
} 

.h_grid_2:hover .gradient_c_grd_2 { 
    opacity: 0; 
} 

Answer 2

이것은 현재 불가능합니다! CSS 전환은 배경 이미지를 아직 지원하지 않습니다.

하지만 당신은 GHE 배경 크기와 배경 위치와 함께 재생할 수 있습니다 : CSS3 그라디언트 정말 속성이 아니라 실제로 이미지 때문에 ...

: Animating CSS3 Gradients에서 인용

브라우저로 만든 경우 해당 속성은 애니메이션 가능 속성 목록에 없습니다. 그렇다고해서 그래디언트를 애니메이트 할 수 없다는 의미는 아닙니다.

그래디언트는 표준 이미지와 마찬가지로 애니메이션 가능 배경 관련 속성 의 영향을받습니다. 여기에는 배경 크기와 배경 위치가 포함됩니다.

몇 가지 기본 코드 스 니펫과이 아이디어를 통합 한 예제의 경우 위 웹 사이트를 참조하십시오.