How to create a fade effect in a horizontal scrolling div

Question

I'm creating a horizontally scrolling div of music albums and want to have a fade on the right hand side of the div to help convey that the list scrolls horizontally.

I've almost cracked it, but can't quite understand why I can't get it exactly the way I want.

Here is a codepen of what I have so far... The fade (red for the sake of the example) works perfectly if the position is set to absolute but fails when set to fixed - which is what I need.

CodePen link

Answer 1

Attach the fade to the .artist__media not to .content. Like this:

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

See the fiddle. Is that what you wanted?