水平スクロールdivでフェード効果を作成する方法

Question

私は、水平方向にスクロールする音楽アルバムのdivを作成し、divの右側にフェードを入れて、リストが水平にスクロールすることを伝えます。

私はほとんどそれをクラックしましたが、なぜ私はそれが私が望むのと正確には理解できないのか分かりません。私は必要なものである - ここで

は、私がこれまで持っているもののcodepenです...フェード（例のために赤）fixedに設定したときに位置がabsoluteに設定したが失敗した場合、完全に動作します。

CodePen link

Answer 1

ない.contentに.artist__mediaにフェードを取り付けます。このよう ：

.artist__media { 
    margin-top: 50px; 
    position: relative; 

    &:after { 
     content: ""; 
     position: absolute; 
     z-index: 1; 
     top: 0; 
     right: 0; 
     bottom: 15px; 
     pointer-events: none; 
     background-image: linear-gradient(to right, rgba(255,255,255,0), red 85%); 
     width: 15%; 
    } 

    .content { 
    white-space: nowrap; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    position: relative; 
    } 
} 

はfiddleを参照してください。 それはあなたが望んだものですか？