<main class="grid">
  <nav class="grid__nav nav">
    <ul class="nav__menu">
      <li class="nav__menu-item">
        <a href="#!">Home</a>
      </li>
      <li class="nav__menu-item">
        <a href="#!">About</a>
      </li>
      <li class="nav__menu-item">
        <a href="#!">Contact</a>
      </li>
    </ul>
    <div class="nav__logo">
      The Boring Company
    </div>
    <div class="nav__cart">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="24" height="24" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 36 36"><path d="M18 17a7 7 0 1 0-7-7a7 7 0 0 0 7 7zm0-12a5 5 0 1 1-5 5a5 5 0 0 1 5-5z" class="clr-i-outline clr-i-outline-path-1" fill="#ffffff"/><path d="M30.47 24.37a17.16 17.16 0 0 0-24.93 0A2 2 0 0 0 5 25.74V31a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2v-5.26a2 2 0 0 0-.53-1.37zM29 31H7v-5.27a15.17 15.17 0 0 1 22 0z" class="clr-i-outline clr-i-outline-path-2" fill="#ffffff"/></svg>
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="24" height="24" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 36 36"><path class="clr-i-outline clr-i-outline-path-1" d="M25 12V9.05a7 7 0 1 0-14 0v7a1 1 0 0 0 2 0V14h8v-2h-8V9.05a5 5 0 1 1 10 0V16a1 1 0 1 0 2 0v-2h5v18H6V14h3v-2H4v20.09A1.91 1.91 0 0 0 5.91 34h24.18A1.91 1.91 0 0 0 32 32.09V12z" fill="#ffffff"/></svg>
    </div>
  </nav>
  <div class="grid__left">
    <div class="pagination">
      <ul>
        <li class="bullet bullet--active">1</li>
        <li class="bullet">2</li>
        <li class="bullet">3</li>
      </ul>
    </div>
    <div class="content content--1 content--active">
      <img src="https://raw.githubusercontent.com/ivanalbizu/image-filter-transition/main/src/img/wine-01.png" alt="">
    </div>
    <div class="content content--2">
      <img src="https://raw.githubusercontent.com/ivanalbizu/image-filter-transition/main/src/img/wine-02.png" alt="">
    </div>
    <div class="content content--3">
      <img src="https://raw.githubusercontent.com/ivanalbizu/image-filter-transition/main/src/img/wine-03.png" alt="">
    </div>
  </div>
  <div class="grid__right">
    <h2 class="title-band">Portishead</h2>
    <div class="details">
      <h3 class="details__album">
        <span>Album</span>
        <span>Dummy</span>
      </h3>
      <p class="details__year">
        <span>Year</span>
        <span>1997</span>
      </p>
      <p class="details__discography">
        <span>Discography</span>
        <span>Go Beat</span>
      </p>
      <ol class="details__track">
        <li>Mysterons – 5:06</li>
        <li>Sour Times – 4:14</li>
        <li>Strangers – 3:58</li>
        <li>It Could Be Sweet – 4:20</li>
        <li>Wandering Star – 4:56</li>
        <li>It's a Fire – 3:48</li>
        <li>Numb – 3:58</li>
        <li>Roads – 5:10</li>
        <li>Pedestal – 3:41</li>
        <li>Biscuit – 5:04</li>
        <li>Glory Box – 5:06</li>
      </ol>
    </div>
    <p>Dummy fue el álbum debut de la banda de trip hop Portishead, considerado clave dentro de este estilo musical, junto con otras bandas como Massive Attack o Tricky. Este nuevo género musical se conocería también como Bristol sound, debido a que la mayor influencia partía de grupos y sellos discográficos de la localidad inglesa de Bristol.</p>
  </div>
</main>
* {
  padding: 0;
  margin: 0;
  &, &::after, *::before {
    box-sizing: border-box;
  }
}

h1, h2, h3, h4, h5, h6, p {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  font-weight: 400;
}

ul, ol {
  list-style-type: none;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}
html {
  font-family: 'Barlow', sans-serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
$color-1: #D95B43;
$color-2: #C02942;
$color-3: #53777A;

@keyframes image-current {
  from {
    filter: blur(0) drop-shadow(0px 20px 30px rgba(0,0,0,.9));
    transform: scale(1);
  }
  to {
    filter: blur(60px) drop-shadow(0px 20px 30px rgba(0,0,0,0));
    transform: scale(0);
  }
}
@keyframes image-next {
  from {
    filter: blur(60px) drop-shadow(0px 20px 30px rgba(0,0,0,0));
    transform: scale(0);
  }
  to {
    filter: blur(0) drop-shadow(0px 20px 30px rgba(0,0,0,.9));
    transform: scale(1);
  }
}

.animating {
  .content--active {
    img {
      animation: image-current .35s linear 0s forwards;
    }
  }
  .content--next {
    img {
      animation: image-next .35s linear .35s;
    }
  }
}

.grid {
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: min-content 1fr;
  gap: 0px;
  grid-template-areas:
    "nav nav"
    "left right";
  height: 100vh;
  background: linear-gradient(to right, $color-3 50%, $color-1 50%);
  overflow: hidden;
  &__nav {
    grid-area: nav;
    padding: 10px 15px;
  }
  &__left {
    grid-area: left;
    display: grid;
    grid-template-columns: 60px repeat(2, 1fr) 60px;
    grid-template-rows: 1fr 13vw;
    gap: 0;
    height: 100%;
    .content {
      grid-area: 1 / 1 / 3 / 5;
      z-index: -1;
      display: grid;
      grid-template-columns: 60px repeat(2, 1fr) 60px;
      grid-template-rows: 1fr 13vw;
      padding-top: 30px;
      img {
        z-index: 5;
        grid-area: 1 / 1 / 3 / 5;
        justify-self: center;
        max-height: calc(100vh - 120px);
        transform: scale(0);
      }
      &::before,
      &::after {
        content: '';
        display: block;
      }
      &::before {
        grid-area: 2 / 1 / 3 / 3;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); //no se ve
        transition: clip-path .5s ease-in-out .2s;
      }
      &::after {
        grid-area: 2 / 3 / 3 / 5;
        clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%); //no se ve
        transition: clip-path .7s ease-in-out;
      }
      transition: clip-path .7s ease-in-out;
      &--active {
        z-index: 2;
        img {
          transform: scale(1);
          filter: blur(0) drop-shadow(0px 20px 30px rgba(0,0,0,.9));
        }
        &::before {
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); //se ve completo
        }
        &::after {
          clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%); //se ve completo
        }
      }
      &--next {
        z-index: 3;
        &::before {
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); //se ve completo
        }
        &::after {
          clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%); //se ve completo
          transition: clip-path .7s ease-in-out;
        }
      }
      &--1 {
        &::before {
          background-color: #843577;
        }
        &::after {
          background-color: #53607A;
        }
      }
      &--2 {
        &::before {
          background-color: #357C97;
        }
        &::after {
          background-color: #F9DA4D;
        }
      }
      &--3 {
        &::before {
          background-color: #4D9B58;
        }
        &::after {
          background-color: #F27F30;
        }
      }
    }
    .pagination {
      grid-area: 1 / 1 / 3 / 2;
      place-self: center;
    }
  }
  &__right {
    grid-area: right;
    padding: 60px 50px 20px;
  }
  //responsive not well supported, simple changes
  @media screen and (max-width: 768px) {
    grid-template-rows: min-content 1fr 1fr;
    gap: 0px;
    grid-template-areas:
      "nav nav"
      "left left"
      "right right";
    overflow: auto;
    &__right {
      background-color: $color-3;
    }
  }
}

.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  &__menu {
    display: grid;
    grid-auto-flow: column;
    gap: 0 10px;
    margin-right: auto;
    &-item {
      a {
        color: #fff;
        text-decoration: none;
      }
    }
  }
  &__logo {
    font-size: 26px;
  }
  &__cart {
    margin-left: auto;
  }
  @media screen and (max-width: 768px) {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    &__logo { grid-area: 1 / 1 / 2 / 3; }
    &__menu { grid-area: 2 / 1 / 3 / 2; }
    &__cart { grid-area: 2 / 2 / 3 / 3; }
    &__logo {
      place-self: center;
    }
  }
}

.pagination {
  li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid #fff;
    transition: color .3s linear, background .3s linear;
    &:not(:last-of-type) {
      margin-bottom: 5px;
    }
    &.bullet--active {
      background-color: #fff;
      color: $color-3;
      transition: color .3s linear, background .3s linear;
    }
  }
}


.details {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: repeat(3, auto);
  gap: 10px 20px;
  grid-template-areas:
    "album track"
    "year track"
    "discography track";
  margin-bottom: 2rem;
  &__album {
    grid-area: album;
  }
  &__year {
    grid-area: year;
  }
  &__discography {
    grid-area: discography;
  }
  &__track {
    grid-area: track;
    justify-self: end;
    text-align: right;
  }
  &__album,
  &__year,
  &__discography {
    span {
      display: block;
      text-align: right;
    }
  }
}

.title-band {
  text-align: right;
  text-transform: uppercase;
  border-bottom: 1px solid;
  margin-bottom: 1rem;
}
View Compiled
const UP = 'UP'
const DOWN = 'DOWN'

const getNextSibling = (elem, selector) => {
	let sibling = elem.nextElementSibling

	if (!selector) return sibling

	while (sibling) {
		if (sibling.matches(selector)) return sibling
		sibling = sibling.nextElementSibling
	}
}

const getPreviousSibling = (elem, selector) => {
	let sibling = elem.previousElementSibling

	if (!selector) return sibling

	while (sibling) {
		if (sibling.matches(selector)) return sibling
		sibling = sibling.previousElementSibling
	}
}

const handleEvent = event => {
  let to
  switch (event.type) {
    case 'wheel':
      if (event.deltaY > 0) to = DOWN
      else if (event.deltaY < 0) to = UP
      break
    case 'keydown':
      if (event.code === 'ArrowDown') to = DOWN
      else if (event.code === 'ArrowUp') to = UP
      else to = false
      break
    default:
      break
  }

  return to
}

const goTo = event => {
  if (document.body.classList.contains('animating2')) return

  const to = handleEvent(event)

  if (!to) return

  let nextContent, nextBullet
  const currentContent = document.querySelector('.content--active')
  const currentBullet = document.querySelector('.bullet--active')
  currentBullet.classList.remove('bullet--active')
  if (to == DOWN) {
    nextContent = getNextSibling(currentContent, '.content') || document.querySelector('.content')
    nextBullet = getNextSibling(currentBullet, '.bullet') || document.querySelector('.bullet')
  } else if (to == UP) {
    nextContent = getPreviousSibling(currentContent, '.content') || document.querySelector('.content:last-of-type')
    nextBullet = getPreviousSibling(currentBullet, '.bullet') || document.querySelector('.bullet:last-of-type')
  }
  document.body.classList.add('animating', 'animating2')
  nextContent.classList.add('content--next')
  nextBullet.classList.add('bullet--active')

  setTimeout(() => {
    currentContent.classList.remove('content--active')
    nextContent.classList.remove('content--next')
    nextContent.classList.add('content--active')
    document.body.classList.remove('animating')
    setTimeout(() => {
      document.body.classList.remove('animating2')
    }, 700);
  }, 700)
}


document.addEventListener('DOMContentLoaded', () => {

  document.addEventListener('keydown', goTo, false)
  document.addEventListener('wheel', goTo, false)

})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.