Image Gallery Layout

A responsive image gallery using flexbox for masonry-like layouts. Features image cards with hover effects, filtering capabilities, and responsive design. Perfect for photography portfolios or media-rich websites.

PREVIEW

Gallery Image Large

Nature

Gallery Image Small

Architecture

Gallery Image Medium

People

Gallery Image Small

Nature

Gallery Image Medium

Architecture

Gallery Image Large

People

CODE

/* Gallery Container */
    .gallery-container {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
    }

    /* Gallery Items */
    .gallery-item {
      flex: 1 1 100%;
      position: relative;
    }

    @media (min-width: 768px) {
      .gallery-item.large {
        flex: 1 1 calc(66.666% - 0.5rem);
      }

      .gallery-item.medium {
        flex: 1 1 calc(50% - 0.5rem);
      }

      .gallery-item.small {
        flex: 1 1 calc(33.333% - 0.5rem);
      }
    }

    /* Filter Controls */
    .filter-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-bottom: 2rem;
    }

    /* Hover Effects */
    .gallery-item:hover .overlay {
      opacity: 1;
    }

    .gallery-item:hover .image {
      transform: scale(1.05);
    }