fix0_o

Пробуй.

Удачи в разработках!

Тебе нужна идея реализации.

Механизм всегда один, твоя задача скомпоновать его так, что бы у тебя получилось то, что ты хочешь. Физически слои не могут проходить сквозь друг друга (z-index(1-2)) - это механика браузеров. Но можно создать визуальный эффект, будто происходит то что ты хочешь

- "при пролистывании верхний уходит и становится как бы фоном всего, второй на передний план и третий становится вторым маленьким"

.
Для этого тебе необходимы клоны фотографий. К примеру - "

при пролистывании верхний уходит и становится как бы фоном

"
- тебе нужны 2 фото 1 уже фон но со стилем (opacity:0), другой верхний клон. При пролистывании совместно, скрываешь и растягиваешь на весь экран верхний кадр. Второй сдвигаешь и растягиваешь до размеров первого. На третьем просто проявляешь его. Те фото, что находятся в очереди и скрыты, меняешь стили (z-index(1-2)). Просто пойми рамки реализации, рендера браузера, накидай план и действуй.

Тебе в принципе понадобятся только 3 свойства:
1) z-index
2) opacity
3) transform

Я не дал тебе готового ответа, но попробовал дать представление, как это делается. Если разберешься, такие задачи будешь щелкать как орешки.

Вот вариант.
Закрывается при клике вне области модульного окна.
Можно создавать сколько угодно модульных окон.

Пример: https://codepen.io/Fix0_o/pen/wRRVpW

<a modal-win='modal_1' href='#'>Click me</a>
<a modal-win='modal_2' href='#'>Click me</a>

<div class='modal_bg'>
  <div class='flex'>
    <div class='modal_win modal_1'>Modal window 1</div>
    <div class='modal_win modal_2'>Modal window 2</div>
  </div>
</div>

.modal_bg {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background: #000;
  display: none;
}
.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  height:100%;
}
.modal_win {
  display: block;
  min-width: 300px;
  min-height: 300px;
  background: #fff;
  text-align: center;
  display: none;
}

$(document).on('click', "[modal-win]", function(event){
  event.preventDefault();
  var target = event.target;
  var acbut = $(target).attr('modal-win');
  $('.'+acbut).fadeIn(600);
  $('.modal_bg').fadeIn(600);
});

$(document).on('click', ".modal_bg", function(event){
  event.preventDefault();
  event.stopPropagation();
  var target = event.target;
  var check = $(target).attr('class');
  if(check == 'flex'){
    $(this).fadeOut(600);
    $('.modal_win').each(function (index, element) {
      $(element).fadeOut(600);
    });
  }
});