CSS Flexible Accordion Cards
Hover Expand Image Gallery — With JavaScript

What You'll Build

In this tutorial you'll create a CSS-only flexible accordion image card gallery — a horizontal strip of five image cards that each expand smoothly when hovered, compressing the rest to make room. The effect is achieved entirely through CSS Flexbox by manipulating the flex property on the hovered card, driven by a single transition rule using a custom cubic-bezier easing for a buttery-smooth feel.

Beyond the core accordion mechanic, each card also transitions its image from muted grayscale to full color as it expands, scales the image with a subtle zoom, and reveals a sliding description overlay that rises up from the card's bottom edge. A decorative numbered badge sits in the corner of each card, and a centered title badge flips between dark and light styling on hover to reinforce the interaction.

This is a popular pattern for image showcase sections, portfolio galleries, destination sliders, and feature comparisons. It requires no JavaScript libraries, no frameworks, and no build tools — just clean, well-structured HTML and CSS that works in every modern browser.

Key Features of This Accordion Card Gallery

Full Source Code (Free)

The entire project lives in a single HTML file — no external CSS or JS files required. The HTML sets up the card structure and links images from picsum.photos for demonstration. The CSS drives every animation, transition, and responsive breakpoint. A four-line script at the bottom removes the shimmer placeholder once each image has loaded. Use the tabs below to explore the HTML and CSS sections separately.

How It Works — Step by Step

Here is a walkthrough of the eight core techniques that make this CSS accordion card gallery tick, from the Flexbox foundation to the mobile fallback strategy.

Customization Ideas

The accordion card gallery is deliberately lean at its core, which makes it easy to adapt to a wide range of real-world use cases. Here are practical starting points.

• Change the number of cards — Add or remove .card elements freely. Flexbox recalculates the space split automatically. If you add more than six cards, consider reducing the flex: 3.5 hover value to something like 2.5 so the expanded card doesn't crowd others to invisibility.
• Swap the images — Replace the picsum.photos URLs with your own images. Keep object-fit: cover on the img elements so any aspect ratio fills the card without distortion.
• Adjust the expand ratio — The flex: 3.5 on .card:hover controls how much larger the active card becomes relative to its siblings. A value of 2 gives a subtler expansion; 5 gives a more dramatic one.
• Try a vertical layout — Change flex-direction to column on .cards and give it a fixed width instead of height. The accordion will then expand cards vertically — a great fit for sidebar or mobile-first layouts.
• Keep cards always in color — Remove the filter: grayscale(100%) brightness(0.8) rule from the base .card img selector if you prefer full color at all times and just want the zoom and description reveal effects.
• Add a click-to-lock state with minimal JavaScript — Toggle an active class on the clicked card to keep it expanded even after the cursor leaves, useful for touch-screen environments or when each card links to a detail view.
• Customize the description content — The .card-desc paragraph can hold any HTML: buttons, tags, ratings, or icon + text combos. Just ensure the padding-top on the description is large enough to clear the gradient's opaque zone so text remains readable.

Best Practices

Following these guidelines will help you ship the accordion gallery in production with confidence and keep it maintainable as your project grows.

• Always write descriptive alt text on every card image. Screen readers announce the alt attribute when a user navigates to the card's anchor — a vague or missing alt breaks the experience for visually impaired visitors.
• Use loading="lazy" on off-screen images — All cards except the first visible one should defer loading so the page's initial paint is not blocked by large image files. The first card's image can use fetchpriority="high" to load it as a priority resource.
• Respect prefers-reduced-motion — Wrap transition and animation declarations in a media query that sets transition: none !important for users who have enabled the operating system's reduced-motion preference. This is both an accessibility requirement and a performance optimization on lower-end devices.
• Keep image dimensions consistent — Cards look cleanest when all images share the same aspect ratio. Use an image host or CDN that supports on-the-fly resizing (like picsum.photos/id/N/800/600) to enforce a uniform size across all cards.
• Avoid animating width directly — The accordion effect works by transitioning the flex shorthand, not raw width. Flex transitions are composited much more efficiently by the browser's layout engine than direct width changes, especially when multiple sibling elements resize simultaneously.

Browser Compatibility

This accordion gallery uses only well-established CSS features — Flexbox, CSS filters, CSS transitions, @keyframes, and pseudo-elements — all of which have had broad support across every major browser for years.

Performance & Responsiveness

Despite being a visually rich component with multiple simultaneous animations, this accordion gallery is exceptionally lightweight because every effect is CSS-driven and uses GPU-compositable properties.

• GPU-accelerated properties: transform (for the image zoom and description slide) and opacity (for the overlay) are both handled entirely on the GPU compositor thread. They never trigger a layout recalculation or paint step, so the animations remain smooth even on mid-range mobile hardware.
• CSS filter compositing: The filter: grayscale() transition is hardware-accelerated on all modern browsers. Declaring will-change: transform, filter on the img element hints to the browser to promote these elements to their own compositor layer in advance, preventing any frame drops during the transition.
• JavaScript animations: Because every visual state — expansion, zoom, color reveal, overlay fade, description slide — is handled by CSS transition rules, there is no JavaScript animation loop, no requestAnimationFrame, and no risk of dropped frames from script execution.
• Lazy image loading: The loading="lazy" attribute on non-primary images defers their network requests until they are near the viewport, improving initial page load time and reducing bandwidth on slower connections.
• Responsive without JavaScript: The mobile breakpoint is achieved entirely through CSS media queries. Switching the stack from horizontal to vertical, forcing images into color, and revealing descriptions permanently are all handled in CSS — no resize event listeners or layout recalculation in script.

Frequently Asked Questions