Image Gallery with CSS3 Columns and Media Queries

Resize me! I'm a responsive image gallery with a CSS3 flavor ;)

Construido utilizando Móviles, CSS3, Tipografía y estilos,

  • 568 visualizaciones
  • 3 comentarios

Más sobre esta demo del autor

Launch it and resize your browser! (I know you want to :D)

This is an experiment using CSS3 columns and media queries to provide an image gallery that responds to the size of the browser. It was created after the idea I got from the homepage of where they use CSS3 columns to show their recent posts with featured images.

Using media queries, this demo shows a different amount of columns according to the size of the viewport (to a maximum of 4 columns, but it is easily extended with a bit of CSS).

Tested on:
-Windows: Firefox, Opera, Chrome
-Linux: Firefox, Chromium
-iPhone: Safari for iOS, Opera Mini
-Android 2.1: stock Android browser

Please let me now if it works on any other configuration.

The demo works on most modern browsers, but even on most versions of Internet Explorer, which lack of support for CSS3 columns and media queries the demo works but shows a single column layout (basic style without applying media queries).

There are some differences in the way browsers render the columns and I have to note that it can show sometimes, for example, the last column with just one image or no images at all (I detected issues with WebKit, where columns are not always well balanced, even when using the "column-fill: balance" property [being balance the default according to the CSS3 Candidate Recommendation 12 April 2011]).

3 comentarios hasta ahora

Log in to add your own.

  1. iulian dijo:

    I have tested your cool experiment on a Windows Vista using Safari and most of the images disappear when you hover over them with the mouse. When you move the mouse out, the image reappears.
    Surprisingly, this is not an issue in IE 8.
  2. jeancarlozapata dijo:

    Hi iulian and thank you

    Actually when I was testing the demo in Chrome for Windows I had (sometimes) similar flashing-images issues, and they didn't happen in Chromium for Linux, so I guess it's something WebKit-Windows related
  3. linardzb dijo:

    Hi, Thanks for the awesome gallery! I have a slight problem on displaying the gallery's 4 columns in Chrome, Safari, Opera browsers. Its working in Firefox:). (if you open in others browsers, it does not work).

About this Demo

Descarga el arhivo ZIP 1748.88 KB · con el código fuente

Esta demo se publica bajo una licencia MPL/GPL/LGPL.