Welcome to our collection of hand-picked free HTML and CSS gallery code examples. These examples have been carefully selected from a variety of sources including CodePen, GitHub, and other resources. This collection has been updated as of August 2023 with 32 new items.

CSS galleries are a design element that allows you to display a collection of images or other content in an organized and aesthetically pleasing manner on your webpage. They can be used to showcase your portfolio, display product images, or create a photo album.

CSS galleries can enhance the visual appeal of your website by providing a structured and interactive way to present your content. They can be particularly effective in scenarios where you have a large amount of visual content to display and want to ensure it is easy for users to navigate and view.

Our collection features a wide range of CSS galleries, each with its own unique design and functionality. Whether you’re looking for a simple grid gallery, a carousel gallery, or a gallery with complex animations and transitions, you’re sure to find something that suits your needs.

We hope you find this collection useful and inspiring for your web development journey. Happy coding!

Related Articles

  1. Bootstrap Galleries
  2. jQuery Galleries

Author

  • Temani Afif

Made with

  • HTML (Pug) / CSS

About a code

CSS Only Image Switcher

A CSS only image switcher powered by the :has() selector and a few CSS variables tricks. Click anywhere on the image to update it. The animation effect depends on the cursor position.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Ilya Streltsyn

Made with

  • HTML / CSS

About a code

Gallery Layout

Gallery layout along the curved path with CSS offset and quantity selectors.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Josetxu

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Random Photos on 3D Canvas - Weave Textures - Pure CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Jesse Couch

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Lightbox using :target and :has

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

A CSS Only Expanding Gallery II

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

A CSS Only Expanding Gallery

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Alvaro Montoro

Made with

  • HTML / CSS

About a code

Animated Mini Photo Gallery

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

CSS Only Image Gallery

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jhey

Made with

  • HTML / CSS

About a code

:has() Sibling Gallery

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Sparshcodes

Made with

  • HTML / CSS

About a code

3D Rotating Gallery

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: CSS Marquee

Author

  • Ryan Mulligan

Made with

  • HTML / CSS

About a code

CSS Marquee

CSS marquee effect featuring the dogs of Unsplash.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

Rounded Grid of Images

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

Pizza-like Grid

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Rita Bradley

Made with

  • HTML / CSS

About a code

Life in the Wild - Flexbox Gallery

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

CSS Grid with Expandable Images

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

Rhombus Image Gallery

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

Honeycomb Image Gallery

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jhey

Made with

  • HTML (Pug) / CSS

About a code

Expanding Gallery View

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Amit Sheen

Made with

  • HTML / CSS (SCSS)

About a code

Cute Pets Gallery

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Jenning

Made with

  • HTML / CSS (SCSS)

About a code

Gallery Details

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • MOZZARELLA

Made with

  • HTML / CSS

About a code

Responsive Image Gallery

Horizontal image gallery with the scrollbar styled as pagination. Hover effects on the images, full viewport responsivity and a separate view for mobile.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Smashing Magazine

Made with

  • HTML / CSS

About a code

Gallery with prefers-reduced-motion

Different transitions are used for the gallery items, depending on the user’s motion preferences.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Gabrielle Wee

Made with

  • HTML (Haml) / CSS (SCSS)

About a code

CSS-Only Photo Info Popup

Working on a popup to display photo information! This uses a checkbox with multiple labels to control the popup.

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Bennett Feely

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Sticky Photostack

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Lookbook Gallery

Author

  • Blaseball Cares

Made with

  • HTML / CSS (SCSS)

About a code

Lookbook Gallery

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -