Gallary

sachin007
Jan 17, 2026 7
Live Preview

Live Editor

<section class="collage-section">
    <h2>Visual Stories</h2>
    <div class="collage-grid">
      <div class="collage-item item-1">
        <img src="https://picsum.photos/id/1015/800/600" alt="Mountain Lake">
        <div class="caption">Alpine Serenity</div>
      </div>
      <div class="collage-item item-2">
        <img src="https://picsum.photos/id/1018/400/300" alt="Forest Path">
        <div class="caption">Hidden Trails</div>
      </div>
      <div class="collage-item item-3">
        <img src="https://picsum.photos/id/1022/400/600" alt="Autumn Trees">
        <div class="caption">Golden Hour</div>
      </div>
      <div class="collage-item item-4">
        <img src="https://picsum.photos/id/1039/800/300" alt="City Skyline">
        <div class="caption">Urban Pulse</div>
      </div>
      <div class="collage-item item-5">
        <img src="https://picsum.photos/id/1040/400/300" alt="Street Art">
        <div class="caption">Colorful Walls</div>
      </div>
      <div class="collage-item item-6">
        <img src="https://picsum.photos/id/1039/800/300" alt="Street Art" alt="Modern Architecture">
        <div class="caption">Concrete Dreams</div>
      </div>
      
    </div>
  </section>
* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Poppins', sans-serif;
      background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
      color: #333;
      padding: 40px 20px;
      min-height: 100vh;
    }

    .collage-section {
      max-width: 1300px;
      margin: 0 auto;
    }

    h2 {
      text-align: center;
      font-size: 2.5rem;
      margin-bottom: 30px;
      color: #2c3e50;
      position: relative;
    }

    h2::after {
      content: '';
      display: block;
      width: 60px;
      height: 4px;
      background: #3498db;
      margin: 12px auto;
      border-radius: 2px;
    }

    /* ===== Collage Grid ===== */
    .collage-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 16px;
      padding: 10px;
    }

    .collage-item {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      cursor: pointer;
    }

    .collage-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease;
    }

    .collage-item:hover {
      transform: translateY(-8px) scale(1.02);
      z-index: 10;
      box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
    }

    .collage-item:hover img {
      transform: scale(1.05);
    }

    /* Caption overlay */
    .caption {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
      color: white;
      padding: 20px 15px 10px;
      opacity: 0;
      transform: translateY(10px);
      transition: all 0.3s ease;
      font-size: 0.9rem;
      font-weight: 600;
    }

    .collage-item:hover .caption {
      opacity: 1;
      transform: translateY(0);
    }

    /* ===== Tile Sizes (Creative Layout) ===== */
    .item-1 { grid-column: span 2; grid-row: span 2; }
    .item-2 { grid-column: span 1; grid-row: span 1; }
    .item-3 { grid-column: span 1; grid-row: span 2; }
    .item-4 { grid-column: span 2; grid-row: span 1; }
    .item-5 { grid-column: span 1; grid-row: span 1; }
    .item-6 { grid-column: span 1; grid-row: span 2; }
    .item-7 { grid-column: span 2; grid-row: span 2; }

    /* ===== Responsive Design ===== */
    @media (max-width: 992px) {
      .collage-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
      }
      .item-1,
      .item-7 { grid-column: span 2; grid-row: span 2; }
      .item-3,
      .item-6 { grid-column: span 2; grid-row: span 1; }
      .item-4 { grid-column: span 4; }
    }

    @media (max-width: 576px) {
      .collage-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
      }
      .collage-item {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
        height: 180px;
      }
      h2 { font-size: 1.8rem; }
    }

    /* Optional: Add subtle film grain texture */
    body::before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: -1;
    }
Categories

Gallary

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
