simple boxes

by ShaCP

HTML

<a href="#one">GO TO ONE</a>
<div class="spacer">
</div>
<div class="container overlay-grid" id="one">
  <div class="box overlay-grid">
  <span class="text">Box 1</span>
    <div class="transparent-box">

    </div>
    <img class="background" src="https://lumiere-a.akamaihd.net/v1/images/sa_pixar_virtualbg_coco_16x9_9ccd7110.jpeg?region=0,0,1920,1080&width=768" />
  </div>
  <div class="box overlay-grid">
  <span class="text">Box 2</span>
    <div class="transparent-box">

    </div>
    <img class="background" src="https://lumiere-a.akamaihd.net/v1/images/sa_pixar_virtualbg_toystory_16x9_8461039f.jpeg" />
  </div>
</div>
<button class="switcher">
SWITCH SECTION
</button>

CSS

.box {
  max-height: 300px;
  max-width: 400px;
  transition: all 2000ms;
  display: grid;
  overflow: hidden;
}

.text {
  font-size: 48px;
  color: white;
}

.overlay-grid {
  display: grid;
}

.overlay-grid > * {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.fade {
  opacity: 0;
}

.sizer {
 width: 100px;
}

.spacer {
  height: 100vh;
}

.container> :nth-child(1) {
  /*   background-color: blue; */
}

.background {
  position: relative;
  z-index: -1;
/*   object-fit: cover; */
  max-width: 140vw;
}

JavaScript

const switcher = document.querySelector('.switcher');
const box = document.querySelector('.box');
switcher.addEventListener('click', (e) => {
box.classList.toggle('fade');
})

box.addEventListener('transitionend', (e) => {
console.log(e.elapsedTime);
console.log('transition end')
})