This piece will provide a cursory overview of several options for CSS gallery code examples that work purely with just CSS or with mostly CSS and some JavaScript or jQuery; the predominant code in each case is CSS-based.

The primary emphasis on the CSS approach to gallery image presentation is a result of the shift away from using tables for presentation schemes, and while this is not a new matter, you would be surprised at how many websites continue to use the <table> tag for their presentation framework. Another emphasis to the CSS approach is to remove dependencies on scripting code such as JavaScript and jQuery. Under review are Gallery CSS, CSS Image Gallery, W3 Schools Dynamic Drive CSS Image Gallery, and the CodePen CSS Image Gallery.

The Gallery CSS by Ben Schwarz states that it is built on pure CSS with no scripts as shown in the screen capture in Figure B below.
However, upon closer inspection, it seems that the two demonstration examples provided in the download include several calls to .js files and jQuery. I am a purist I guess, and if you are going to promote a product that states it is void of a certain component, but then your working model or examples all include parts of that component, then it is hard for me to understand how they get away with these types of statements. The zip file gallery-css-master.zip download (5.1MB) from GitHub, contains the following directories: dist, examples, sass, and several files at the root of the gallery-css-master directory. A screen capture of the file structure is displayed in Figure C, as shown in the local site panel of FileZilla at right.

Three quick steps will get you up and running a CSS gallery in quick order.

  • Include linking to the gallery.css and gallery.theme.css
  • Then add the markup to your gallery with class and id calls.
  • If you want to add autoplay, then include the autoplay class class=”gallery autoplay items-3″.

I ran both examples demonstrations in Chrome and IE8 and the IE8 example did not show the controls in the IE8 browser, but did display in Chrome, so there appears to be an issue that persists with control operator properties in IE.

If you want to learn more on how the CSS Gallery works, you can buy Ben’s 40-minute screencast for $12 to view his advanced techniques including layout and setup, CSS transitions, CSS selectors, vendor prefixing, advanced use of SASS and SCSS, and CSS animation.

The W3Schools CSS Image Gallery shown in Figure D uses a simple set of image div containers with inline display, margins, borders, auto height and  width, and float left properties.

Figure D

The code creates a series of images that are cleanly boxed into thumbnails each with its own caption. In the “try it yourself” demo displayed in Figure E, the simple and clean code is actually responsive as well, as the images continue to float left as the screen size transitions to a smaller dimension. I’ve tested the code for the W3Schools CSS Image Gallery in IE8 and Chrome with successful results.

Figure E

The Dynamic Drive CSS Image Gallery is another quite simply written example of CSS code that displays larger versions of gallery thumbnail images dynamically with mouse hovers, shown in Figure G below. HTML captions can be added to the enlarged image, and every aspect of the Image Gallery exists as plain HTML on the page. I’ve tested the code examples in IE8 and Chrome and the hover functionality works as expected. According to the documentation with the gallery, it works in IE6+, Firefox, and Opera 8+.

Figure G

Another feature explained in the demo for the dynamic drive gallery is that it utilizes CSS’s “:hover” pseudo class to cause an element to react with onMouseover events, and when that happens, an absolutely positioned container holding the enlarged image is anchored on the page by another container with a position set to relative.

The final example is the CodePen CSS Gallery, which is another simple example of pure CSS code that displays thumbnails of the images below the expanded current image. A mouse click is required to view the expanded images included within the gallery. I tested the demo code in Chrome with good results; however IE8 failed to perform the mouse-click function. Another example demo of the same style using CSS transitions is also available.

Figure H

These four examples just scratch the surface of possibilities with pure CSS or CSS with limited scripting. The advantages of using a CSS only gallery code means that you won’t have to worry about users that have JavaScript turned off, or having to add script calls to your HTML documents.