Every gallery below uses placeholder photos from Unsplash. To make them yours, just swap the src on each <img> for your own picture — the layout never changes, because the new image takes the same sized box.

A responsive CSS Grid of images. Click any image to open a lightbox overlay with prev/next arrows. The grid uses auto-fill + minmax so it wraps automatically on smaller screens.

One big featured image on the left with smaller thumbnail cards on the right. Great for portfolios where one piece is the star and others support it.

An image-only slider with arrow buttons, dot navigation, and a progress bar. Uses CSS transform to slide and JavaScript for the controls.

A split card with the image on the left and a title, description, and navigation arrows on the right. Each slide tells a story.

A horizontal strip of images that scrolls continuously using a CSS animation. Duplicate the images so the loop is seamless.

Use CSS Grid span classes to make some images wider or taller. Mixing sizes creates visual rhythm and keeps the gallery from feeling like a boring spreadsheet.

Big, clean cards that zoom slightly on hover. Inspired by Apple product pages. The image scales inside the card using overflow:hidden so it doesn't break the layout.

Each photo rotates slightly for a hand-pinned scrapbook feel. On hover, the card snaps straight and scales up. Perfect for personal photography or event recaps.

Editorial-style gallery where the title slides up from the bottom on hover and the image gently zooms. Great for portfolios where context matters — the visitor sees the image first, then discovers the story.

A nostalgic auto-scrolling filmstrip with perforated edges drawn in pure CSS using repeating-linear-gradient. Hover to pause the animation and inspect a frame.

One big lead image on the left with a stacked column of three supporting frames on the right. Hover the hero for a slow Ken Burns-style zoom. Ideal for photographers presenting a series with one anchor shot.