Q:

Scrolling row disappear behind another row with transparent background

I'm trying to get a row that when it scrolls up it disappears behind a row filled with text. The issue I have is the background is patterned so I can't just color the background of the text row and have the other row scroll below it like it would usually. Is there any way I can make the scrolling row just disappear when it reaches the row above?

#main-container {
  width: 95%;
  height: 100%;
}

#title-text {
  margin-top: 5px;
  margin-bottom: 0px;
  font-size: 80px;
  color: black;
  font-family: "CallingAngelsPersonalUse";
  text-shadow: 4px 6px 12px #ooo;
}

#date-text {
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 45px;
  color: black;
  font-family: "Strawberry_Whipped_Cream";
  text-shadow: 2px 4px 6px #fff;
}

#title-text-small {
  background:inherit;
  margin-top: 10px;
  margin-bottom: -15px;
  font-size: 12vw;
  color: black;
  font-family: "CallingAngelsPersonalUse";
  text-shadow: 4px 6px 12px #fff;
}

#date-text-small {
  background:inherit;
  margin-top: 0px;
  margin-bottom: -15px;
  font-size: 10vw;
  color: black;
  font-family: "Strawberry_Whipped_Cream";
  text-shadow: 2px 4px 6px #fff;
}

#title-row-small {
  width: 100%;
  z-index: 100;
  background:inherit;
  position: fixed;
}

#title-container-small {
  background:inherit;
  width: 100%;
}

@media screen and (max-width: 479px) {
  #card-row {
    top: 180px;
    position: relative;
    overflow: hidden;
    bottom: -180px;
    z-index: 99999;
  }
  #card-container {
    overflow: hidden;
  }
}

@media only screen and (min-width: 480px){
  #card-row {
    top: 50px;
    position: relative;
    overflow: hidden;
  }
}

@media only screen and (min-width: 1200px){
  #card-row {
    top: 10px;
    position: relative;
    overflow: hidden;
  }
}

#modal-title {
  margin-top: 20px;
  margin-left: 10px;
  font-family: "Strawberry_Whipped_Cream";
  font-size: 4vw;
}

#modal-text {
  margin-top: 10px;
  margin-left: 10px;
  font-family: "OpenSans-Regular";
  font-size: 4vw;
}

#card-title {
  font-family: "OpenSans-Regular";
  left: -10px;
  bottom: -20px;
}

#button {
  font-family: "OpenSans-Regular";
  margin-top: 10px;
  margin-bottom: -15px;
}

#map {
  width: 100%;
  height: 400px;
}

#map-image {
  width: 100%;
  height: auto;
}

#map-image-text {
  text-align: center;
  margin-top: 10px;
  font-family: "OpenSans-Regular";
}

#confetti-link {
  margin-top: 10px;
  margin-left: 10px;
  font-family: "OpenSans-Regular";
}

.modal {
  position: fixed;
  left:0;
  right:0;
  max-height:80%;
  height: 80%;
  width: 99%;
  margin: auto;
}

.modal-content {
  height:90%;
  padding:0;
  overflow: auto;
}

.modal-footer {
  bottom: 0px;
  overflow-y: scroll;

}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<div id="main-container" class="container">
  <div class="row">
    <div class="container center">
      <div class="show-on-medium-and-up hide-on-small-only">
        <p id="title-text">Scott and Viki</p>
        <p id="date-text">23/06/18</p>
        <a id="button" class="black waves-effect waves-light btn z-depth-3" href="mailto:scottandviki@gmail.com?subject=Wedding%20R.S.V.P"><i class="material-icons right">email</i>R.S.V.P</a>
      </div>
    </div>
  </div>
  <div id="title-row-small" class="row">
    <div class="container center">
      <div id="title-container-small" class="col s12 show-on-small-only hide-on-med-and-up">
        <p id="title-text-small">Scott and Viki</p>
        <p id="date-text-small">23/06/18</p>
        <a id="button" class="black waves-effect waves-light btn z-depth-3" href="mailto:scottandviki@gmail.com?subject=Wedding%20R.S.V.P"><i class="material-icons right">email</i>R.S.V.P</a>
      </div>
    </div>
  </div>
  <!-- Agenda Card -->
  <div id="card-row" class="row">
    <div class="col s12 m6 l6 xl4">
      <a href="#" onclick="$('#agenda-modal').modal('open');">
        <div class="card">
          <div class="card-image">
            <img src="http://lorempixel.com/400/200/sports" class="z-depth-4">
            <span id="card-title" class="card-title">Agenda</span>
          </div>
        </div>
      </a>
    </div>
    <!-- Map Card -->
    <div class="col s12 m6 l6 xl4">
      <a href="#" onclick="$('#map-modal').modal('open');">
        <div class="card">
          <div class="card-image">
            <img src="http://lorempixel.com/400/200/sports" class="z-depth-4">
            <span id="card-title" class="card-title">Map</span>
          </div>
        </div>
      </a>
    </div>
    <!-- Confetti Card -->
    <div class="col s12 m6 l6 xl4">
      <a href="#" onclick="$('#confetti-modal').modal('open');">
        <div class="card">
          <div class="card-image">
            <img src="http://lorempixel.com/400/200/sports" class="z-depth-4">
            <span id="card-title" class="card-title">Confetti</span>
          </div>
        </div>
      </a>
    </div>
    <!-- Hotels & Taxi's Card -->
    <div class="col s12 m6 l6 xl4">
      <a href="#" onclick="$('#hotel-modal').modal('open');">
        <div class="card">
          <div class="card-image">
            <img src="http://lorempixel.com/400/200/sports" class="z-depth-4">
            <span id="card-title" class="card-title">Hotels & Taxi's</span>
          </div>
        </div>
      </a>
    </div>
    <!-- Children Card -->
    <div class="col s12 m6 l6 xl4">
      <a href="#" onclick="$('#children-modal').modal('open');">
        <div class="card">
          <div class="card-image">
            <img src="http://lorempixel.com/400/200/sports" class="z-depth-4">
            <span id="card-title" class="card-title">Children</span>
          </div>
        </div>
      </a>
    </div>
    <!-- Camping Card -->
    <div class="col s12 m6 l6 xl4">
      <a href="#" onclick="$('#camping-modal').modal('open');">
        <div class="card">
          <div class="card-image">
            <img src="http://lorempixel.com/400/200/sports" class="z-depth-4">
            <span id="card-title" class="card-title">Camping</span>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>

Is this possible? Currently, when i scroll you can see the cards behind the text which doesn't look great.
Here is an image of the site so far: 

A:

I came up with another solution
You have to set overflow:hidden and height:100% to #main-container and then apply overflow:scroll to the #card-row
Working Fiddle 

