JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="masonry-grid">
  <div class="grid-item wide">
    <img src="https://placehold.co/600x400/000000/FFF" alt="Wide Photo">
  </div>
  <div class="grid-item tall">
    <img src="https://placehold.co/600x800/000000/FFF" alt="Tall Photo 1">
  </div>
  <div class="grid-item wide">
    <img src="https://placehold.co/600x400/000000/FFF" alt="Wide Photo 2">
  </div>
  <div class="grid-item wide">
    <img src="https://placehold.co/600x400/000000/FFF" alt="Wide Photo">
  </div>
  <div class="grid-item tall">
    <img src="https://placehold.co/600x800/000000/FFF" alt="Tall Photo 1">
  </div>
  <!-- Add more grid items as needed -->
</div>

<div id="overlay" class="overlay">
  <div class="overlay-content">
    <span class="close-btn" onclick="closeOverlay()">&times;</span>
    <div id="carousel" class="carousel"></div>
  </div>
</div>

CSS

.masonry-grid {
  column-count: 3;
  column-gap: 1em;
}

.grid-item {
  display: inline-block;
  margin-bottom: 1em;
  width: 100%;
	overflow: hidden;
}

.wide {
  width: calc(66.666% - 0.5em); /* 2/3 */
}

.tall {
  width: calc(33.333% - 0.5em); /* 1/3 */
}

img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Styles for the overlay */
.overlay {
  display: none;
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
}

.overlay-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.close-btn {
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 20px;
}

.carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80%;
}

.carousel img {
  max-width: 80%;
  max-height: 80%;
  margin: auto;
}

JavaScript

// Function to open the overlay and display the carousel
function openOverlay() {
  document.getElementById('overlay').style.display = 'block';
}

// Function to close the overlay
function closeOverlay() {
  document.getElementById('overlay').style.display = 'none';
}

// Function to create carousel items
function createCarousel(images) {
  const carousel = document.getElementById('carousel');
  carousel.innerHTML = '';

  images.forEach((image, index) => {
    const img = document.createElement('img');
    img.src = image.src;
    img.style.display = index === 0 ? 'block' : 'none'; // Show first image, hide others
    carousel.appendChild(img);
  });

  // Start carousel
  let currentIndex = 0;
  setInterval(() => {
    carousel.children[currentIndex].style.display = 'none';
    currentIndex = (currentIndex + 1) % carousel.children.length;
    carousel.children[currentIndex].style.display = 'block';
  }, 2000); // Change image every 2 seconds (adjust as needed)
}

// Function to handle clicking on grid items
document.querySelectorAll('.grid-item img').forEach(item => {
  item.addEventListener('click', event => {
    const images = Array.from(document.querySelectorAll('.grid-item img'));
    const index = images.findIndex(img => img.src === event.target.src);
    createCarousel(images);
    openOverlay();
  });
});