Compression is a kinetic portfolio HTML/CSS template built with CSS Flexbox and hover-driven transitions. Five vertical panels share the viewport by default and expand or compress on hover using a custom cubic-bezier curve that gives a deliberate, mechanical motion. Each panel reveals project details, metadata, and a call-to-action when expanded, while compressed panels desaturate to grayscale. No JavaScript is needed for the core layout interaction.
The template uses a dark, industrial palette with off-white type, neon chartreuse accents, and no border-radius. Typography pairs Anton for large vertical spine titles with Space Mono for monospaced project details. Work, About, and Contact open as CSS-only modal overlays via the :target pseudo-class, including backdrop blur and smooth entry animations.
Compression is fully responsive and stacks into a vertical layout below 900px. It also includes staggered entrance animations, custom scrollbar styling, gradient header and footer scrims, and prefers-reduced-motion support. This free template suits designers, photographers, agencies, and studios that want a bold, no-framework portfolio with an editorial feel.
The author admin1 has offered the item for free, you can now download it.
Download
