EXPANDING SECTIONS

Expanding sections on hover.

Author

  • James

Made with

  • HTML / CSS

EXPANDING PANELS

Responsive flexbox expanding panels.

Author

  • MARK

Made with

  • HTML (Pug) / CSS (SCSS)

PANEL SWITCH INTERACTION

Panel switch interaction with flexbox and JS.

Panel Switch Interaction - GIF Demo

Author

  • Susan Lee

Made with

  • HTML / CSS (SCSS) / JavaScript (Babel)

FULL-WIDTH PANEL EXPANSION

A CSS only expanding panel gallery with CSS vars to progressively enhance with animation.

Demo image: Full-Width Panel Expansion

Author

  • Shaw

Made with

  • HTML / CSS (Less)

FLEX PANELS

This boxes resize when clicked. Try to click more than one and see what happens.

Flex Panels - GIF Demo

Author

  • Adriana Hasbun

Made with

  • HTML / CSS / JavaScript

PURE CSS HOVER

Pure CSS hover panels.

Author

  • XiChen

Made with

  • HTML (Pug) / CSS (Sass)

MULTIPLE SLIDING PANELS

Sliding panels around to give greater emphasis to the active panel. Uses only CSS :hover states with transform/opacity transitions for maximum performance.

Demo image: Multiple Sliding Panels

Author

  • Shaw

Made with

  • HTML / CSS (Less)

CSS-ONLY SLIDING PANELS USING TRANSFORMS

Sliding panels around to give greater emphasis to the active panel. Uses only CSS :hover states with transform/opacity transitions for maximum performance. Responsively switches to a stacked layout on smaller screens, or by using the .panels--stacked class.

CSS-only Sliding Panels Using Transforms - GIF Demo

Author

  • Shaw

Made with

  • HTML / CSS (Less)

SKEWED FLEXBOX PANELS

Experimenting with skew transforms applied to a series of flexbox panels. Switches the flex-direction to columns for smaller screen sizes.

Demo image: Skewed Flexbox Panels

Author

  • Ryan Mulligan

Made with

  • HTML (Pug) / CSS (SCSS)

PURE CSS PANELS

This is an example of onepage panels navigation made with only CSS.

Pure CSS Panels - GIF Demo

Author

  • Mattia Astorino

Made with

  • HTML / CSS (Less)

DUAL SLIDING PANELS

Dual sliding panels with awesome CSS animations. Built with Stylus and vanilla JavaScript. Be sure to checkout the responsive view

Dual Sliding Panels - GIF Demo

Author

  • Ettrics

Made with

  • HTML / CSS (Stylus) / JavaScript