#Simple css gallery series#

Using absolute positioning on elements takes them out of the “flow” of the document: the web page acts like the definition declarations are no longer there, and collapses the remaining structure of our document. We’ll get around this by positioning the elements absolutely: That hides our large images, but preserves the space they take on-screen. There are many CSS properties that can be used to make elements on a web page “disappear”: display, visibility, pushing things off the screen with margin or left, and more. The first is that our large images are visible, and we only want them to appear when the user hovers over a thumbnail image. On viewing the web page in our browser we’re immediately confronted with several problems. I have left the alt values for the images blank with markup shortcuts for the sake of clarity. If the thumbnails were all different sizes, you would put the width and height as separate inline styles for each image, as you normally would for the large images. (Note that for the purpose of this exercise I am assuming that every thumbnail is the same size, so I could put their width and height as part of a declaration:

The basic markup is fairly straightforward:

#Simple css gallery series#

Here, the incredibly useful (and unappreciated) definition list comes to our aid: we are, at heart, talking about a series of terms (which could be words, images, links, or anything else) that are expanded upon with a definition. What we desire is a set of interactive thumbnail images that reveal larger versions of themselves, including an explanation of the picture's context and meaning. Once you have your content, the question is what markup makes the most semantic sense to wrap around it. For clarity, save the large versions of the images as subject.jpg and the small versions as subject_thumb.jpg. To complete this exercise, you’ll need three thumbnail photographic images, ideally all the same size, and three matching large versions of those same images. But all that is required, in most cases, is some simple CSS combined with semantic markup. There are many ways to create image galleries: JavaScript, PHP, Flash and more.