Anime Girl Gallery

.gallery-sec-anime {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding: 10px 0;
}

.anime-card {
  background-color: #1f1f1f;
  border-radius: 12px;
  overflow: hidden;
  width: 150px;
  cursor: pointer;
  transition: all 0.4s ease;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.anime-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.anime-card:hover {
  width: 300px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.anime-card-title {
  padding: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #f5f6fa;
  white-space: nowrap;
}

.anime-card-overlay {
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 100%;
  padding: 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
  color: #fff;
  font-size: 14px;
  transition: bottom 0.4s ease;
}

.anime-card:hover .anime-card-overlay {
  bottom: 0;
}
            

          const data = [
            {
              title: "your title",
              image: "your-img.jpg",
              description: "your-description"
            }
          ];
          
          const galleryContainer = document.getElementById("gallery-container");
          
          // Function to create a gallery row with cards
          function createGalleryRow(items) {
            const galleryRow = document.createElement("div");
            galleryRow.className = "gallery-sec-anime";
          
            items.forEach((item) => {
              // Create card container
              const card = document.createElement("div");
              card.className = "anime-card";
              
              // Create image
              const img = document.createElement("img");
              img.src = item.image;
              img.alt = item.title;
              
              // Create title
              const title = document.createElement("div");
              title.className = "anime-card-title";
              title.textContent = item.title;
              
              // Create overlay
              const overlay = document.createElement("div");
              overlay.className = "anime-card-overlay";
              overlay.textContent = item.description;
              
              // Add everything to card
              card.appendChild(img);
              card.appendChild(title);
              card.appendChild(overlay);
              
              // Add card to row
              galleryRow.appendChild(card);
            });
          
            galleryContainer.appendChild(galleryRow);
          }
          
          // Split data into chunks and create rows
          const chunkSize = 6;
          for (let i = 0; i < data.length; i += chunkSize) {
            const chunk = data.slice(i, i + chunkSize);
            createGalleryRow(chunk);
          }