• Asteroid433
• Dan's Web Design Experiments

• Bio
  • Dan Pearce is a sculptor and not a Web designer or a Web development professional. His background as an engineer exposed him to a substantial amount of programming but in an archaic language called Fortran. Coming up to speed in modern programming methods and standards means UN-learning assumptions that weren't even obvious as assumptions.
  • It also means that he starts out expecting something should be possible and then fumbles around until he figures out a way to make it work.
• Statement
  • My goals with respect to this website were primarily to create an environment to display sculpture to anyone with access to a web browser. I prefer that the least intrusive methods possible are used so that the material is available to the broadest audience. So I try to use HTML and CSS and not javascript or java if possible.
  • That said, I would rather invest my time learning the standards for new browsers than learning how to patch older ones.
  • My "Time as an Object" series attempts to subdue time and rotate it into three-space as a physical dimension. Depictions of motion present unexpected forms that can be held and examined in their entirety. The simple experience of walking from one place to another offers a metaphor for my attempt to traverse between the worlds of technology and art.
• Contact
  • Dan G. Pearce
  • PO Box 132 Free Union , VA , 22940 USA
  • pearcedan@cstone.net

Pure CSS Image Gallery

How do you create an image gallery using CSS and no javascript and no flash? It's a really easy and well established CSS-trick that takes advantage of the CSS pseudo-class :hover.

You're already familiar with this if you've ever noticed that a hypertext link changes color when your mouse lingers over it. Like this. What's going on here is fairly simple: the CSS style declaration has defined what happens when the user's mouse is over an element. I'll explain this with respect to the <a> element because the a:hover has been supported by most all browsers since (what? IE4?)

The CSS style declaration for the <a> element tells the browser what to do in either the normal situation or the case when the user's mouse happens to be hovering over a link on the page. We can set this ourselves or let the browser use its default style (typically blue for a link, red for a link that is being hovered over, and purple if the link has already been visited).

How does this relate to an image gallery? Starting at the beginning, the markup for a single image in a document looks like: <img src="pics/2009WalkingManWoodT.jpg"/> and displays a single image with no secondary functions like :hover. Like this:

If we wrap this <img> in anchor <a>...</a> tags then we can use all the features of the anchor we just talked about above for a hyperlink: <a href= "http::asteroid433.com"><img src="pics/2009WalkingManWoodT.jpg">A work in progress</a> like this:

A work in progress

Note that now the image and the images subtext are both part of the link.

Here the image itself is being used as a hyperlink (in this case the link would point at my homepage). Big deal, right. Ah! but wait there's more. Just like the text hyperlink the <a> tag can be styled using CSS so we can define things like the color of the text or the color of the background etc in both the normal and the :hovered state. CSS has now taken on a more dynamic role. An element can have one appearance when nothing is happening and a different appearance when we get near it (there are other events as well like :active and :focus but I haven't found these to be as useful for my purposes.)

Next we take advantage of the fact that there can be sub-elements inside of the <a> tag. Through CSS we can define how to display those sub-parts differently. This is what would allow us to have a subtitle with bold or italic font or a different color text etc. For the gallery I used a <span>...<span> wrapper inside the <a> tag. That way I can use CSS to control where and how to display anything inside that <span>. Note that CSS does not assume that the location and size of anything inside the <span> is necessarily related to whatever else might be inside the <a> tag. I used the <span> to define a new display area with its own location, a size, and other characteristics. Furthermore, it turns out that we can even define a new image inside that <span>. Like this:

<a class="testthumb" href="#">
<img src="pics/2006DoNotTouchT.jpg"/>
<span>
<img src="pics/2006DoNotTouchB.jpg" />
<br />
Subtitle - Do Not Touch
</span>
</a>

This is saying that each thumbnail image in my image gallery is wrapped in an <a> element. That <a> element has other stuff in it besides just the original thumbnail image: it also has a <span> sub-element which itself has sub-elements like a new image and a subtitle. CSS then can determine how to deal with each of these parts separately. We want to have the thumbnail displayed all of the time but have the <span> image "pop-up" only when the user hovers over the thumbnail image. In fact, nothing is popping up at all. Instead we are simply telling CSS to make everything inside the <span> be invisible under normal circumstances but to become visible whenever the user's mouse happens to hover over the thumbnail image. Lastly, you may have noticed the class="testthumb" href="#" statements inside the <a> tag. The class="testthumb" part is just good housekeeping and makes it easier to adress our special CSS declarations to thumbnail images that have larger versions and not impact every image inside an <a> tag. The href="#" seems to be a trick to allow html to tell the browser to link back to the same page at this point on the page but this time the active element will be the link. I use this sometimes to allow the user to change the default imagein my gallery display box.

Subtitle - Do Not Touch

Et viola!

Ok, ok. I'll show you the CSS stuff. It looks like:

a.testthumb span{ /*CSS for enlarged image*/
position:absolute; /*set to fixed to prevent scrolling of the display box*/
visibility: hidden; /* hide it until hovereed over*/
background-color: white;
border:1px solid #dedede;
text-decoration: none;
}

a.testthumb:hover span{ /*let image show on hover*/
visibility: visible;
z-index: 1;
}

The first section hides our bigger image by setting "visibility: hidden;" and the second section makes it visible again by setting "visibility: visible;". The other niceties are to set "position:absolute;" to the <span> so that our page flow is not disrupted by the invisible image. The background-color and border are mostly pretty stuff but verify that IE works without them. The z-index in the second part should be set high enough for the larger image to overlay anything else on the page. Note the a.testhtumb which tells CSS that only those <a> tags that have class="testthumb" are to be affected by these style declarations.