Kang Ismet Tryit Editor

<!DOCTYPE html>
<html>
<head>

.grid-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  cursor: zoom-in;
  border-radius: 8px;
}

/* 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); }
}
</style>

</head>
<body>

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

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

</script>
</body>
</html>

HTML Online Editor