Collection of hand-picked free HTML and CSS image grid code examples from Codepen and other resources.

Related Articles

  1. CSS Image Effectss
  2. CSS Thumbnails
  3. HTML <figure> & <figcaption> with CSS

Author

  • Jhey

Links

Made with

  • HTML (Pug) / CSS (Stylus)

About a code

CSS Image Reveal

CSS image reveal with filter & clip-path.

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

Responsive: yes

Dependencies: -

Demo image: CSS Folded Poster Effect

Author

  • Lynn Fisher

Links

Made with

  • HTML / CSS (Stylus)

About a code

CSS Folded Poster Effect

Add a containing div to turn an image into a folded poster.

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

Responsive: yes

Dependencies: -

Demo image: Rotated Image Grid

Author

  • Max

Links

Made with

  • HTML / CSS

About a code

Rotated Image Grid

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

Responsive: yes

Dependencies: -

Author

  • Mert Cukuren

Links

Made with

  • HTML / CSS (SCSS)

About a code

Image Hover Effect

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

Responsive: yes

Dependencies: -

Author

  • Collin Smith

Links

Made with

  • HTML (Pug) / CSS (Stylus)

About a code

When Life Gives You Lemons

Hover animation could be used for links to categories or post types. Also deals with skewing container while keeping background image straight.

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

Responsive: yes

Dependencies: -

Demo image: Image Mosaic Effect with CSS Grids & Blend Modes

Author

  • Dudley Storey

Links

Made with

  • HTML / CSS (SCSS)

About a code

Image Mosaic Effect with CSS Grids & Blend Modes

Uses CSS Grid Spec and mix-blend-mode to create a mosaic effect from a single image.

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

Responsive: yes

Dependencies: -

Demo image: CSS Image Grid

Author

  • Mike

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

CSS Image Grid

A dense grid of random images with auto-fill and background-size: cover.

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

Responsive: yes

Dependencies: -

Demo image: CSS Image Grid with Hover

Author

  • Jordan

Links

Made with

  • HTML / CSS

About a code

CSS Image Grid with Hover

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

Responsive: yes

Dependencies: bootstrap.css

Demo image: Image Grid

Author

  • Envato Tuts+

Links

Made with

  • HTML / CSS

About a code

Image Grid

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

Responsive: yes

Dependencies: -

Demo image: Isometric Image Grid

Author

  • Joel Eade

Links

Made with

  • HTML / CSS

About a code

Isometric Image Grid

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

Responsive: no

Dependencies: -

Author

  • Tiffany Stoik

Links

Made with

  • HTML (Haml) / CSS (SCSS)

About a code

Hexagon Grid

A hexagon image grid using clip-path.

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

Responsive: no

Dependencies: -

Demo image: 2x2 Image Grid

Author

  • Victor Matonis

Links

Made with

  • HTML / CSS

About a code

2x2 Image Grid

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

Responsive: no

Dependencies: -

Author

  • Alex Raven

Links

Made with

  • HTML / CSS

About a code

Simple Pulsing Image Hover Effect

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

Responsive: yes

Dependencies: -

Demo image: Flexbox + Quantity Queries Image Grid

Author

  • lucas lemonnier

Links

Made with

  • HTML (Pug) / CSS (Stylus)

About a code

Flexbox + Quantity Queries Image Grid

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

Responsive: yes

Dependencies: -

Author

  • Aysha Anggraini

Links

Made with

  • HTML / CSS

About a code

Pure CSS Thumbnail Hover Effect

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

Responsive: yes

Dependencies: -