Sticky revealing image overlay

by mzilverberg

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row justify-content-center">
    <div class="col-lg-10">
      <div class="row no-gutters o-article-wrapper">
        <div class="col-8">
          <article class="c-article">
            <h1>Donec ullamcorper nulla non metus auctor fringilla</h1>
              <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
              <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
              <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
              <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
              <p>Morbi leo risus, porta ac...

SCSS

//
// Notes:
// [1] - Pull the column `.col-6` two columns to the left to make it fit the row
// [2] - The position from the right is fixed as we use a fluid container
// [3] - We're positioning a child of `.col-6`, which should therefore begin at the second half of the row. Therefore, `left: 50%` is sufficient
// [4] - Recalculate value as the layout changes because of `.col-lg-10` class
//

// Bootstrap variables
$bootstrap-cols: 12;
$bootstrap-pull: 2;
$bootstrap-padding: 15px;

// Layout variables
$margin: 60px;
$border-width: 1px;
$image-height: 80vh;

//**************//
// Main content //
//**************//

.o-article-wrapper {
  position: relative;

  &:before,
  &:after {
    display: block;
    content: '';
    position: fixed;
    z-index: 4;
    top: 0;
    right: $bootstrap-padding;
    left: 50% + ($bootstrap-pull / $bootstrap-cols * 100%);
    height: $margin / 2;
    margin-left: -5px;
    background-color: #fff;;

    @media (min-width: 992px) {
      left: 50% + ((2/12 * 10/12) * 100%); /* [4] */
    }
  }
  &:after {
    top: auto;
    bottom: 0;
    height: calc(#{100vh - $image-height} - #{$margin / 2});
  }

}

.c-article {
  position: relative;
  z-index: 3;
  margin: $margin 0;
  padding: $margin;
  border: $border-width solid #d8d8d8;
  background: #fff;
}

//********************//
// Scaling lead image //
//********************//

.c-img-wrapper {
  position: relative;
  z-index: 2;
  margin-left: -($bootstrap-pull / $bootstrap-cols * 100%); /* [1] */

  &__inner {
    position: fixed;
    top: 0;
    right: $bootstrap-padding; /* [2] */
    left: 50%; /* [3] */
    height: $image-height;
    margin-top: $margin / 2;
    background-position: 50% 50%;
    background-size: cover;

    @media (min-width: 992px) {
      right: calc((100vw - (#{($bootstrap-cols - $bootstrap-pull) / $bootstrap-cols} * 100%)) / 2 + #{$bootstrap-padding}); /* [4] */
    }

  }
}

//********//
// Images //
//********//

.c-img {
  position: relative;
 ...