Overlaying an image while scrolling

If you look at the picture attached you can see a picture of a person then a white space with a border radius. I wanted to know if there is a way while scrolling down for the white space the overflow the image, and while scrolling up to show the image again. I am looking to code this using HTML, CSS, and JS This could be an example of what I am trying to do :example

<div class="description panel blue">
  <div><h1>Layered pinning</h1>
    <p>Use pinning to layer panels on top of each other as you scroll.</p>
    <div class="scroll-down">Scroll down<div class="arrow"></div></div>
  </div>
</div>


<section class="panel red">
    ONE
</section>
<section class="panel orange">
    TWO
</section>
<section class="panel purple">
    THREE
</section>
<section class="panel green">
    FOUR
</section>





<header>
   <a href="https://greensock.com/scrolltrigger">
     <img class="greensock-icon" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/scroll-trigger-logo-light.svg" width="200" height="64" />
  </a> 
</header>

JS:

gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray(".panel").forEach((panel, i) => {
  ScrollTrigger.create({
    trigger: panel,
    start: "top top", 
    pin: true, 
    pinSpacing: false 
  });
});


ScrollTrigger.create({
  snap: 1 / 4 // snap whole page to the closest section!
});

overlay picture