Clipping Quadrant Image Gallery

This is a Clipping Quadrant Image Gallery. It segments a full-screen display into four interactive quadrants, each housing a unique photograph. Upon clicking any segment, the component utilizes the clip-path property to instantly expand that specific quadrant to cover the entire viewport, transitioning from a mosaic-style grid into a singular, immersive view.

Specs

• Weight: ~2 KB. Zero dependencies.
• Performance: Excellent. Animating clip-path and transform properties is handled efficiently by the browser compositor, avoiding heavy layout repaints.
• Theming / Customization: Easily customizable by changing the clip-path: inset() values in SCSS and swapping the source images.
• Responsiveness: Fluid. Uses CSS Grid height: 100vh to maintain the quadrants relative to the viewport size.
• Graceful Degradation: The component relies on the clip-path property. Browsers lacking this support will display all four images stacked or side-by-side, but the core interactivity will be lost.

Anatomy

The component uses a high-performance layering technique.

• HTML (The Skeleton): A grid container .grid housing four .col elements. Each column contains a <figure> with an image and a caption.
• CSS (The Skin): A central logic layer. .grid uses a 1x1 grid layout where all columns occupy the same area (grid-area: 1/1). clip-path: inset() is then used to “carve out” the visible portion of each image, ensuring they don’t overlap until interacted with.
• JS (The Nervous System): A simple forEach loop that listens for clicks. It toggles an .active class to remove the clip-path constraint and uses transitionend events to handle the caption fade-in sequence.

Logic

The standout logic is “The Inset Clipping Mask”:

.grid .col-1 { clip-path: inset(0 50% 50% 0); }
.grid .col-2 { clip-path: inset(0 0 50% 50%); }
// ... on active
.grid .col.animate-col { clip-path: inset(0); }

Instead of using overflow or complex positioning to hide parts of the image, the developer uses the inset value of clip-path. By setting the inset (Top, Right, Bottom, Left), the browser hides everything outside the defined rectangle. When the .animate-col class is applied via JS, the inset transitions to 0 (no clipping), effectively “unlocking” the image to fill the entire container area seamlessly.

Feel

Cinematic and clean. The expansion is aggressive and decisive; the selected image snaps into place with a clear, direct transition. It feels less like a webpage element and more like an app-like navigation component. The addition of the caption fading in only after the transition completes adds a layer of professional polish, ensuring the text doesn’t clutter the motion.