Randomized 3D Image Fall Image Fall with Glow and Flash with Lightbox

This title captures the essence of the animation: images randomly "fall" or zoom out from the screen in a 3D space with glow and blur effects that dynamically fade away. The final white flash highlights the image placement for visual emphasis. Including "Randomized" reflects the non-linear image animation order, and "3D" indicates the perspective depth used in the effect.

Other possible descriptive titles could be:

• "Dynamic 3D Image Drop with Glow and Flash Animation"
• "Randomized Zoom-Out Image Grid with Flash Finish"
• "Falling Image Grid with Glow Fade and Flash Highlight"
• "3D Depth Fall Animation with Glow and Flash End"

These options emphasize the core visual elements: depth/falling motion, glow/blur transitions, and the flash effect that completes the animation sequence.

<div class="gallery-container">
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/young-adorable-girl-smiling-gesture-peace-purple-background-high-quality-photo_114579-92188.jpg" /><span>Actor</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/portrait-woman-playing-poker-casino_23-2151831069.jpg" /><span>Creator</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/beautiful-brunette-woman-evening-dress-smiling-holding-wine-glass_176420-3793.jpg" /><span>Director</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/young-stylish-sexy-woman-cinema-backstage-celebrating-with-glass-champagne_285396-9020.jpg" /><span>Singer</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/medium-shot-smiley-woman-outdoors_23-2149005408.jpg" /><span>Artist</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/close-up-reporter-preparing-interview_23-2149183582.jpg" /><span>Hairstylist</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/beautiful-brunette-woman-evening-dress-smiling-holding-wine-glass_176420-3783.jpg" /><span>Dancer</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/portrait-woman-playing-poker-casino_23-2151831072.jpg" /><span>Producer</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/handsome-man-near-christmas-tree-gentelman-black-suit_1157-45163.jpg" /><span>Composer</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/smiling-beautiful-woman-red-dress_329181-18528.jpg" /><span>Fighter</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/side-view-young-man-holding-purple-flower_23-2149539646.jpg" /><span>Model</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/people-taking-part-high-protocol-event_23-2150951341.jpg" /><span>Designer</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/elegant-young-woman-room-with-christmas-lights_23-2147724286.jpg" /><span>Comedian</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/hipster-digital-outdoor-lady-hotel-cute_1303-2786.jpg" /><span>Animator</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/woman-sideways-standing-curtain-sparkles_23-2148331904.jpg" /><span>Editor</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/young-girl-posing-seaport_1157-1485.jpg" /><span>Writer</span></div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/model-wearing-beautiful-shade-clothing_23-2151428009.jpg" /><span>Manager</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/vertical-shot-beautiful-young-lady-front-christmas-tree_181624-30017.jpg" /><span>Technician</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/front-view-man-with-iris-fantasy-colors_23-2150140111.jpg" /><span>VFX</span>
  </div>
  <div class="image-cell"><img src="https://img.freepik.com/free-photo/portrait-beautiful-young-model-plaid-shirt-posing-near-lamps_114579-81048.jpg" /><span>Stunt</span>
  </div>
  <a class="closeBtn">✕</a>
</div>

<div class="gallery-overlay"></div>

CSS

body {
  background: radial-gradient(circle, #161b22 0%, #000a16 100%);
  font-family: "Source Code Pro", Inconsolata, Menlo, monospace;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-container {
  width: 550px;
  height: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 18px;
  perspective: 1200px;
  position: relative;
}

.image-cell {
  position: relative;
  width: 100%;
  height: 160px;
  opacity: 0;
  /* Start "in your face": big, close to viewer */
  transform: scale(2) translateZ(800px);
  filter: blur(100px) brightness(10);
  border-radius: 16px;
  transition: transform 1.2s cubic-bezier(0.45, 1.5, 0.65, 1), filter 0.8s,
    opacity 0.6s;
  box-shadow: 0 0 42px 0 rgba(125, 255, 255, 0.55);
  overflow: hidden;
  cursor: crosshair;
}

.image-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

.image-cell:hover {
  box-shadow: 0 0 42px 0 rgba(125, 255, 255, 1);
}

.image-cell span {
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 14px;
  top: 0;
  opacity: 0;
  text-transform: uppercase;
  transition: opacity 0.5s ease;
  /* Smooth transition on opacity */
  pointer-events: none;
}

.image-cell:hover span {
  opacity: 1;
  cursor: crosshair;
  animation: bounce 0.6s ease;
}

.image-cell:hover img {
  filter: blur(25px) brightness(60);
  transition: transform 1.2s cubic-bezier(0.45, 1.5, 0.65, 1), filter 0.8s,
    opacity 0.6s;
}

.image-cell.active {
  opacity: 1;
  /* Land at grid position, smaller, flat */
  transform: scale(1) translateZ(0px);
  filter: none;
}

.image-cell.flash-effect {
  position: relative;
  z-index: 5;
  animation: flashAnimation 0.1s ease forwards;
}

.placeholder {
  visibility: hidden;
  pointer-events: none;
}

.image-cell.fadeOut {
  opacity: 0.3;
  pointer-events: none;
  /* Optional: disable interaction */
  transition: opacity 0.6s ease;
}

.image-cell.centered {
  z-index: 1000;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  transform: translate(var(--dx, 0), var(--dy, 0)) scale(1.2);
  overflow: visible;
  filter: none;
  /* pointer-events: none; */
}

.image-cell.centered img .image-cell.centered:hover,
.image-cell.centered:hover img {
  filter: none;
}

/* Make span visible after centering with animation */
.image-cell.centered span {
  color: #ffffff;
  opacity: 0;
  animation: moveBottom 0.5s ease forwards;
  /* animation-delay: 1s; */
  pointer-events: none;
  top: auto;
  bottom: -90px;
  z-index: -1;
}

/* Disable hover effect on span for centered items */
.image-cell.centered:hover span {
  opacity: 1;
  animation: bounce 0.6s ease, moveBottom 0s 0s;
}

.closeBtn {
  position: absolute;
  right: -30px;
  top: -30px;
  color: white;
  opacity: 0;
  cursor: pointer;
}

.showBtn {
  opacity: 1;
  animation: fadeIn 0.25s ease;
}

.gallery-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  z-index: 900;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  cursor: pointer;
  z-index: -1;
}

.gallery-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Flash effect: full white overlay with smooth fade */
@keyframes flashAnimation {
  0%,
  45%,
  55%,
  100% {
    background-color: transparent;
  }

  50% {
    background-color: white;
  }
}

/* Bounce effect */
@keyframes bounce {
  0%,
  40%,
  50%,
  80%,
  100% {
    transform: translateX(0);
  }

  45% {
    transform: translateY(-15px);
  }

  85% {
    transform: translateX(-7px);
  }
}

/* Keyframes for sliding span (optional) */
@keyframes moveBottom {
  0% {
    bottom: 0;
    opacity: 0;
  }

  100% {
    bottom: -90px;
    opacity: 1;
  }
}

/* Keyframes for sliding span (optional) */
@keyframes fadeIn {
  0% {
    opacity: 0;
    margin-top: -25px;
  }

  100% {
    opacity: 1;
    margin-top: 0px;
  }
}

Javascript

const colors = ["#ab79ff", "#54fbb8", "#ff7979", "#79ffb9", "#ffd479"];
const cells = Array.from(document.querySelectorAll(".image-cell"));
const overlay = document.querySelector(".gallery-overlay"); // Assuming in HTML
const close = document.querySelector(".closeBtn"); // Assuming in HTML

function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

// Initial light/shadow animation with random delay
const randomizedCells = shuffle([...cells]);
randomizedCells.forEach((cell, i) => {
  const delay = 300 + Math.random() * 600 + i * 120;
  setTimeout(() => {
    const randColor = colors[Math.floor(Math.random() * colors.length)];
    const randBlur = Math.random() * 2 + 2;
    const randDropShadowSize = Math.random() * 28 + 10;

    cell.style.filter = `blur(${randBlur}px) brightness(${
      1 + Math.random() * 0.7
    }) drop-shadow(0 0 ${randDropShadowSize}px ${randColor})`;
    cell.style.boxShadow = `0 0 ${randDropShadowSize}px ${randColor}`;
    cell.classList.add("active");

    setTimeout(() => {
      cell.style.filter = `none`;

      cell.classList.add("flash-effect");

      setTimeout(() => {
        cell.classList.remove("flash-effect");
      }, 800);
    }, 1200);
  }, delay);
});

// Function to close centered view
function closeCentered() {
  cells.forEach((c) => {
    c.classList.remove("centered", "fadeOut");
    c.style.removeProperty("--dx");
    c.style.removeProperty("--dy");
  });
  //  overlay.classList.remove('active');
}

// Event listeners for cells
cells.forEach((cell) => {
  cell.addEventListener("click", (event) => {
    event.stopPropagation();

    // If this cell is already centered, do nothing (skip)
    if (cell.classList.contains("centered")) {
      return; // Prevent closing or re-centering
    }

    // Close any previously centered
    closeCentered();

    // Calculate translation...
    const rect = cell.getBoundingClientRect();
    const viewportCenterX = window.innerWidth / 2;
    const viewportCenterY = window.innerHeight / 2;
    const dx = viewportCenterX - (rect.left + rect.width / 2);
    const dy = viewportCenterY - (rect.top + rect.height / 2);

    cell.style.setProperty("--dx", `${dx}px`);
    cell.style.setProperty("--dy", `${dy}px`);

    cell.classList.add("centered");
    close.classList.add("showBtn");

    cells.forEach((c) => {
      if (c !== cell) {
        c.classList.add("fadeOut");
      }
    });
  });

  // Show overlay
  //   overlay.classList.add('active');
});

// Clicking on overlay closes the centered image
// overlay.addEventListener('click', () => {
//   closeCentered();
// });

// Clicking on close
close.addEventListener("click", () => {
  closeCentered();
  close.classList.remove("showBtn");
});

// Clicking outside gallery also close centered (optional)
// document.addEventListener('click', () => {
//   closeCentered();
// });

// Prevent overlay click from closing when clicking inside gallery-container
const galleryContainer = document.querySelector(".gallery-container");
galleryContainer.addEventListener("click", (e) => {
  e.stopPropagation();
});

Working Demo