Как при клике увеличить блок с изображением в центр экрана?

Question

Нужно что бы при клике на блок(с фото) он "ехал" в центр экрана и увеличился (типа пред.просморт фотографии) и при втором клике ставал обратно на место в грид-сетке, не искажая ее т.е. чтобы верстка не ломалась. Как реализовать это ? У меня есть :

.wrapper {
  width: 700px;
  height: 500px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 5px 5px;
  grid-template-areas: "th tr mid" "th second mid"
}

.box {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

.box img {
  position: absolute;
  width: 100%;
  height: 100%;
}

.box:nth-of-type(2) {
  grid-area: th;
}

.box:nth-of-type(4) {
  grid-area: mid;
}

<div class="wrapper">
  <div class="box"><img src="img/1.jpg" alt=""></div>
  <div class="box"><img src="img/2.jpg" alt=""></div>
  <div class="box"><img src="img/5.jfif" alt=""></div>
  <div class="box"><img src="img/6.jpg" alt=""></div>
  <div class="box"><img src="img/7.jpg" alt=""></div>
  <div class="box"><img src="img/8.jpg" alt=""></div>
  <div class="box"><img src="img/9.jpg" alt=""></div>
</div>

<div class="modal-container">
  <div class="modal"></div>
</div>

Пробовал разные идеи, смотрел плагины на Jquery но так и не смог. https://codernote.ru/lesson/imagezoom-new.html - что то типа того только блок должен сам анимационно и физически увеличиватья и смещаться в центр...и потом при втором клике обратно назад... Спасибо !!!

БЛОГ НА HUSL

Как при клике увеличить блок с изображением в центр экрана?

Ответы (0 шт):