放射状の勾配の背景が適切に移行していません

Question

ホバー上で、ホバー上で0の不透明度から0.6に遷移するバックグラウンドを取得できません。

.work--overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: radial-gradient(rgba(64,56,43,0), rgba(0,0,0,0), rgba(0,0,0,0)); 
    opacity: 1; 
    z-index: 1; 
    transition: background 0.3s ease-in-out; 
} 

    .work--overlay:hover { 
     background: radial-gradient(rgba(64,56,43,0.6), rgba(0,0,0,0.6), rgba(0,0,0,0.6)); 
     transition: background 0.3s ease-in-out; 
    } 

私もちょうど遷移しやすさの部分が機能していない、効果がホバーで仕事をしていることを言及する必要があります： はここに私のCSSです。だから私は99％がこれはCSSのことだと確信しています。

Answer 1

は主に不透明とホバー状態から削除移行のために、あなたのコードにいくつかの変更をしました：ここ

... 

    opacity: 0; 
    z-index: 1; 
    transition: all 0.3s ease-in-out; 
} 

    .work--overlay:hover { 
     opacity:1; 
     background: radial-gradient(rgba(64,56,43,0.6), rgba(0,0,0,0.6), rgba(0,0,0,0.6)); 
    } 

は、作業の移行とフィドルです：https://jsfiddle.net/g6a0b2zg/

Answer 2

私は以前この問題に遭遇しました。私はバックグラウンドではなく不透明度を遷移させるために:: before擬似クラスを追加しました。 基本的に、実際のクラスの下にあるbeforeクラスを作成します（positionおよびz-indexの変更を参照）。 それがホバリングすると、レイヤーが表示されます。

.work--overlay { 
    position: relative; 
    z-index: 50; 

    width: 100%; 
    height: 100%; 
    background: radial-gradient(rgba(64,56,43,0), rgba(0,0,0,0), rgba(0,0,0,0)); 

    transition: opacity 0.3s ease-in-out; 
} 

.work--overlay:before { 
      background: radial-gradient(rgba(64,56,43,0.6), rgba(0,0,0,0.6), rgba(0,0,0,0.6)); 
    top:0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: -100; 
    position: absolute; 
    content: ''; 
    opacity: 0; 
    transition: opacity 3s ease-in-out; 
} 


    .work--overlay:hover:before { 
     opacity:1; 
    }