Cara Membuat Image Gallery dengan Efek Zoom-in Zoom-out

Table of Contents

Cara Membuat Image Gallery dengan Efek Zoom-in Zoom-out - Di bawah ini adalah HTML, CSS dan JavaScript untuk membuat sebuah gambar akan membesar (Zoom-in) ketika diklik, dan akan kembali normal ketika diklik (efek kursor zoom-out).

Tampilannya nanti akan seperti gambar di bawah ini, tapi gambar tersebut tidak bisa diklik (hanya gambaran). Untuk lebih jelasnya silahkan lihat Demo. Bagi pengguna Blogger yang belum faham, saya sertakan tutorial di Demo Blogger

CSS

/* MODAL */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 999;
  justify-content: center;
  align-items: center;
  cursor: zoom-out;
}

.modal-content {
  max-width: 95%;
  max-height: 95%;
  animation: zoomIn 0.25s ease;
}

@keyframes zoomIn {
  from { transform: scale(0.8); }
  to   { transform: scale(1); }
}

JavaScript

const modal = document.getElementById("imgModal");
const modalImg = document.getElementById("modalImg");
const images = document.querySelectorAll(".grid-img");

images.forEach(img => {
  img.addEventListener("click", () => {
    modal.style.display = "flex";
    modalImg.src = img.src;
  });
});

modal.addEventListener("click", () => {
  modal.style.display = "none";
});

HTML

<div class="gallery">
  <img src="image.jpg" class="grid-img">
  <img src="image.jpg" class="grid-img">
  <img src="image.jpg" class="grid-img">
  <img src="image.jpg" class="grid-img">
</div>

<div id="imgModal" class="modal">
  <img class="modal-content" id="modalImg">
</div>