Reveal image over top another while scrolling

Question

Currently have three images displayed below one another. I'm using Sticky-Kit to keep the top image in place while the rest are scrolled into view.
What I'd like to achieve though, is to keep the images below the top one hidden until they reach the bottom of the first image. In other words, there's only one image visible, and the next one covers it from the bottom to the top while scrolling. Not sure how to best approach this.

Further breakdown of what I'm trying to achieve:

1) Scroll until #pic1 is centered in the viewport, at which point it 'sticks' while scrolling continues.

2) As the user continues to scroll, #pic2 begins to raise up from the bottom of #pic1 until it fully covers #pic1. Prior to this happening, only #pic1 is visible.

3) When #pic2 has fully covered #pic1, #pic3 emerges from the bottom to cover #pic2

$(document).ready(function() {
  var $ = jQuery.noConflict();
  
  $("#text").stick_in_parent({offset_top: 90});
  $("#pic1").stick_in_parent({offset_top: 90});
  $("#pic2").stick_in_parent({offset_top: 90});
  $("#pic3").stick_in_parent({offset_top: 90});
});

#text {
  width:40%;
  float:right;
  background-color:white;
  height:500px;
  padding-top:173px;
  padding-left:50px;
}

#pic1 {
  position:relative;
  width:60%;
  height:500px;
  background-color:green;
}

#pic2 {
  position:relative;
  width:60%;
  height:500px;
  background-color:red;
}

#pic3 {
  position:relative;
  width:60%;
  height:500px;
  background-color:blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.min.js"></script>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<div id="text" class="p2">
  <h2 id="bluetooth-header" class="header-title"><span>HEADER</span></h2>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.nd enjoy your newly curated playlist from the palm of your hand.
</div>

<div id="pic1"></div>
<div id="pic2"></div>
<div id="pic3"></div>

codepen.io/anon/pen/JbQZwN