Dec 15 2009
CSS and Images: Simple Roll-over Image Gallery
0 comments(Note: while this lesson gets a little ahead of the concepts introduced so far, and uses properties (primarily position) that have not yet been thoroughly explained, I find it a useful example to wrap up a course / semester.)
There are many, many different possible methods to create image galleries. Many people use complex JavaScript, when all is required, in most cases, is some simple CSS combined with semantic markup.
What I’m about to show you is a synthesis of several techniques combined with a few of my personal additions. This solution works in modern browsers (i.e. Firefox, Safari, Chrome, Opera, IE8) : more complex examples and code with greater compatibility will follow shortly. 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. For clarity, save the large versions of the images as subject.jpg and the small versions as thumb_subject.jpg.
Once we have our content, as always, the root question is: what markup makes the most semantic sense for what we are trying to express? What we desire to create is a set of thumbnail images that, when interacted with, reveal larger versions of themselves with an explanation of their context and meaning. Once again, the incredibly useful (and relatively unknown / underappreciated) 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 declaration.
So our markup is fairly straightforward:
<dl id="gallery"><dt><img src="images/thumb_maple.jpg" alt="Maple tree" title="Maple tree" /></dt><dd><img src="images/maple.jpg" alt="Maple tree" title="Maple tree" /></dd><dt><img src="images/thumb_oak.jpg" alt="An oak tree" title="An oak tree" /></dt><dd><img src="images/oak.jpg" alt="Oak tree" title="Oak tree" /></dd><dt><img src="images/thumb_sequoia.jpg" alt="Fallen sequoia tree" title="Fallen sequoia tree" /></dt><dd><img src="images/sequoia.jpg" alt="Fallen sequoia tree" title="Fallen sequoia tree" /></dd></dl>
(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 dl#gallery dt img { } declaration in a style sheet if I wanted to. If the thumbnails were all different sizes, you would put the width and height as separate inline styles for each image. as you would for the large images. I am also assuming that all images are placed in an images folder next to this (X)HTML page.)
On viewing the web page in our browser we’re immediately confronted with several problems. The first is that our large images are visible, and we only want them to appear when the user hovers over a thumbnail image.
There are many CSS properties that can be used to make elements on a web page “disappear”: display, opacity, pushing things off the screen with margin or position, and more. We will use visibility:
dl#gallery dd { visibility: hidden; }
That hides our large images, but preserves the space they take on-screen. We’ll get around this by positioning the dd elements absolutely:
dl#gallery dd { visibility: hidden; position: absolute; }
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. (The <dd> elements and the images they contain are still present, of course, simply hidden by our visibility: hidden rule. You could see where the images are by removing or commenting out that part of the style declaration.)
position: absolute is very useful, but very dangerous – if not used carefully, it leads to the hell of positioning every element on the page absolutely, due to designer’s misplaced desire for “pixel-perfect positioning” and the aforementioned collapse due to the removal of absolutely positioned elements from the flow of the document. position: absolute should, as a general rule, be avoided unless it is absolutely required – and when used, you should know why you are using it, rather than “it just works this way”.
In this case, position: absolute is used for an eminently logical reason: we want all of our large images to appear in the same location. Right now, they are not (again, turn off visibility: hidden temporarily to see where they are). In addition, we want the position of the large images to be measured in respect to their relation to the definition list as a whole. This is a two-step process. First, some CSS for the definition list itself:
dl#gallery { position: relative; }
The reason for this line will be discussed in future entries – for now, the rule is:
Absolutely positioned elements position themselves against the origin of the body (i.e. the top left corner of the web page), unless they are within another absolutely positioned or relatively positioned element.
In essence, we’ve told the absolutely positioned <dd> elements to measure their position against the definition list, rather than the body. We can see this by once more temporarily commenting out the visibility of the <dd> elements and adding more CSS to the style declaration:
dl#gallery dd { /* visibility: hidden; */ position: absolute; top: 20px; left: 200px; }
Naturally the numbers for left and top are guesses; you should feel free to adjust them to suit your particular design before turning visibility: hidden back on.
The penultimate step is to make the <dd> elements appear only when we are hovering over the thumbnail images. Looking at our markup, we can see that each <dd> element is immediately preceded by a <dt>. We also recall that :hover can be applied to any element, not . Ergo, the solution is a combination
dl#gallery dt:hover + dd { visibility: visible; }
This CSS solution is a good one, with just one remaining problem: you can make the large images visible by moving your mouse to the right of the thumbnail images, where the <dt> is still active. This is due to the fact that <dt> is a block tag, and therefore stretches all the way across the page by default. But if it’s a block tag, we can apply width to it. Assuming that your thumbnail images are all 75 pixels wide:
dl#gallery dt { width: 75px; }
The complete CSS code:
dl#gallery { position: relative; }dl#gallery dt { width: 75px; }dl#gallery dd { visibility: hidden; position: absolute; top: 20px; left: 200px; }dl#gallery dt:hover + dd { visibility: visible; }
Suggested further work:
Place a border around the <dd> elements. Add space between the large picture and this border. Add a background-color. Add a caption to the large image. Center-align this caption. Add a border to the <dt> elements.
(Note that none of these suggested additions, with the exception of adding captions, should require any alterations of the existing XHTML code).
- Dec12
- ◀A Simple div Example
- Classic Typography Effects In CSS: Pull quote With Generated Quote Marks ▶
- Dec17
You must be signed up and logged in to leave a comment. Doing so only takes a moment.
