Compression

Compression is a free kinetic portfolio HTML CSS template from TemplateMo that uses hover-expanding vertical panels and CSS-only modals to present creative work. The entire layout is built with pure HTML and CSS — no JavaScript — and runs in any modern browser as a static, one-page site that can be hosted on any web server.

What is Compression?

Compression is a one-page portfolio template built exclusively with HTML and CSS Flexbox. It takes your project titles, descriptions, metadata, and call-to-action links as content and renders them inside five vertical panels that expand on hover to reveal details. The template is free to download from TemplateMo, requires no build tools, and outputs static files you can deploy directly.

Key Features

• Hover-driven panel expansion — Five vertical panels share the viewport equally by default; hovering over a panel expands it with a custom cubic-bezier easing curve that produces a mechanical feel, while other panels compress and desaturate to grayscale.
• No JavaScript core — The primary layout interaction, panel expansion, works entirely through CSS :hover, so the template functions without any script.
• CSS-only modal overlays — Work, About, and Contact sections open as modals using the :target pseudo-class, with backdrop blur and entrance animations.
• Industrial dark theme — A dark background with off-white typography, neon chartreuse accents, and zero border-radius throughout creates a distinctive editorial look.
• Type system — Anton is used for massive vertical spine titles and Space Mono for monospaced project details.
• Responsive stacking — Below 900px viewport width, the layout stacks into a vertical mobile layout.
• Motion and accessibility details — Staggered entrance animations, custom scrollbar styling, gradient header/footer scrims, and prefers-reduced-motion support are built in.
• Free license — The template is free to use for personal or commercial projects, with editing and redistribution allowed.

Who is it for?

• Designers — Present a portfolio of projects with hover-revealed case details and call-to-action buttons.
• Photographers — Use the five-panel gallery layout to showcase a visual collection that expands into descriptions.
• Creative agencies — Display services or team information via the CSS-only modals and one-page structure.
• Studios — Launch a bold, no-framework portfolio site with minimal setup.

What can you do with Compression?

• Portfolio showcase: Display five featured projects or works in a compact, expanding panel layout with metadata and links on hover.
• One-page agency site: Use the modal overlays for Work, About, and Contact sections, keeping everything on a single scrollable page.
• Dark-themed gallery: Take advantage of the grayscale-to-color hover effect to emphasize selected images or projects.

How does Compression work?

The template presents five vertical panels as the default view. When you hover over a panel, it expands to show the project title, metadata, and a call-to-action button, while the other panels compress and turn grayscale. Modals for additional pages open via :target when you follow hash links like #work or #about. All of this runs without JavaScript.

Pricing

Compression is 100% free to download and use, including for commercial projects. You can edit and reuse the template for your own sites.

FAQ

Is Compression free for commercial use?

Yes, TemplateMo states the template is free to download for anyone and can be edited and used for both commercial and non-commercial sites.

Does Compression require JavaScript?

No. The core panel-expansion interaction and modal overlays are implemented with CSS only, using :hover and :target pseudo-classes.

Is Compression responsive?

Yes, the five-panel layout stacks into a vertical layout when the viewport is below 900px wide, and it includes prefers-reduced-motion support for accessibility.

What fonts does Compression use?

Anton is used for large spine titles, and Space Mono is used for monospaced project details. Both are Google Fonts that the template references.

Can I use Compression without a build tool?

Yes, since it's plain HTML and CSS, you can download the ZIP, edit the files, and upload them to any static web server.