<main>
  <div class="wrapper">
    <article class="flow">
      <h1>Background blend mode</h1>
      <figure class="callout">
        <p>
          Toggle blending to see how these stacked images are effected by
          <code>background-blend-mode</code> to create a compostion.
        </p>
      </figure>
      <label class="toggle" for="toggle-element">
        <span class="toggle__label">Toggle blending</span>
        <input type="checkbox" role="switch" class="toggle__element" id="toggle-element" checked />
        <div class="toggle__decor" aria-hidden="true">
          <div class="toggle__thumb"></div>
        </div>
      </label>
      <div class="demo"></div>
    </article>
  </div>
</main>

.demo {
  max-width: 400px;
  height: 400px;
  position: relative;
  background: url(https://source.unsplash.com/YJOuS1GZbDQ/600x400),
    url(https://source.unsplash.com/V7oLFRVqeHM/600x400),
    url(https://source.unsplash.com/_wWjQr1JZ1k/600X400);
  background-size: cover;
  background-blend-mode: overlay;
}

const toggle = document.querySelector('#toggle-element');
const demo = document.querySelector('.demo');

toggle.addEventListener('change', ({target}) => {
  demo.style.backgroundBlendMode = target.checked ? 'overlay' : 'normal';
});