First time visitor? The tutorials start here.

CSS Photo Gallery

We’ll need to make sure the enlarged images cover the surrounding thumbnails, which requires layering via z-index. Since Internet Explorer is still a piece of crap as of IE8 and still won’t obey a switch in z-index for an image when it’s hovered on, we need to set that for the link itself instead.

z-index only works on an element that is absolutely or relatively positioned, so we need to give it one of those. If we absolutely position all of our links, they will only stick themselves to the top left of the page… or to the top of its parent element, if that parent element is absolutely or relatively positioned. So here, we’ll position it relatively…

#gallery a { 
	position: relative; 
	z-index: 10;
}

We also need to set a width and height for the anchor links, because we will need to absolutely position the enlarged images (well actually, the links surrounding the images, since IE won’t obey the other way).

As I was saying… If you absolutely position an image inside an anchor link and the width and height of that anchor link aren’t defined, everything will shift when you hover on an image. But when defining width and height on the image’s containing link, the link becomes a placeholder when absolute positioning takes the image out of the flow.

#gallery a { 
	position: relative; 
	z-index: 10; 
	width: 100px; 
	height: 75px;
}

Since anchor links are inline elements and you can only apply width and height to block-level elements (here’s the difference), we need to change those anchor links to block-level elements.

#gallery a { 
	position: relative; 
	z-index: 10; 
	display: block;
	width: 100px; 
	height: 75px; 
}

Now that the anchor links are block level elements, each link (and the image it contains) will reside on its own line. In other words, you’ll have one column of images. To take care of that problem, we’ll just float them.

#gallery a { 
	position: relative; 
	z-index: 10; 
	display: block; 
	float: left;
	width: 100px; 
	height: 75px; 
}

Now for something easy, adding a margin around those links, which will in effect add a margin around the images.

#gallery a { 
	position: relative; 
	z-index: 10; 
	display: block; 
	float: left;
	width: 100px; 
	height: 75px;
	margin: 10px;
}

That takes care of the links when they’re not hovered on. Now for the thumbnail images themselves.

The Thumbnail Images

This part is pretty simple. We just define the width, height, and any other styling we want to give to those thumbnails. Here, I also added a 1px border to give them that look of being set into the background.

The width and height are necessary. The rest is optional.

#gallery img { 
	width: 100%; 
	height: 100%; 
	border: 1px solid; 
	border-color: #999 #ddd #ddd #999;
}

Since the links containing each image has a set width and height (100×75px), we can easily get away with using 100% for both the width and height of the images, and it will cause the image to basically fill those links. This way, if you want to change the width and height of thumbnails at a later time, you only need to change them once… for the links but not for the images.

Hovered Links

#gallery a:hover {
	z-index: 50;
}

Previously, we gave non-hovered links a z-index of 10. Here, we’re increasing the z-index to 50 when they are hovered on, which will cause the links — and the images inside them — to overlap the non-hovered thumbnail links.

The exact number you use for the z-index doesn’t matter, and 10 and 50 were arbitrarily chosen for this exercise. What matters is that you use a smaller number for things you want in the background, and a larger number for things you want in the foreground. This is called layering.

We also defined relative positioning for links and want to keep them relatively positioned when they’re hovered on, so we don’t need to define relative positioning again. What we do need, however, is to redefine their coordinates when they’re hovered on.

#gallery a:hover {
	z-index: 50; 
	top: -45px; 
	left: -53px;
}

This positioning refers to the top left corner. By giving the top positioning a negative we move it up, and by defining a negative left position we move it to the left. When the image is enlarged, it will be more or less centered over its corresponding thumbnail.

Finally, we come to…

The Full-Sized Images

We only want these CSS definitions to apply to:

  1. an image (img) that is
  2. inside a link that’s being hovered on (a:hover), which is
  3. inside the id of “gallery” (#gallery)

As such, we target it with #gallery a:hover img.

#gallery a:hover img { 
}

The one thing you absolutely need to do here is define the full image size so the image is enlarged when hovered on (uh, I mean when the link surrounding the image is hovered on), otherwise all this extra stuff is pointless.

#gallery a:hover img { 
	width: 200px;
	height: 150px; 
}

Finally, feel free to add extra styling, if you prefer. This part is optional.

#gallery a:hover img { 
	width: 200px; height: 150px; 
	padding: 1px; 
	background: #ccc; 
	border: 2px solid; border-color: #eee #bbb #bbb #eee;
}

Enjoy your new photo gallery, and have fun playing with it. 🙂

This post has multiple pages. Go to page: 1 2

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Comments (2)

LesaMay 16th, 2009 at 9:36 pm

Update:

It has been brought to my attention by a friend who has access to IE6, that the images don’t enlarge in IE6 when they’re hovered on. Since IE6 is incompatible with Windows Vista (go figure), I downloaded IETester and did some experimenting with it.

Here is what I found. If you have standalone versions of IE (works only with Windows XP), or a program like IETester (works with XP or Vista, but it crashes occasionally on my laptop), you may be able to see these results for yourself. Otherwise, you can just read my comments on the experimental pages.

Note: If you view it in the standalone that I linked to above, the last page in my experiments will display incorrectly because the page uses an IE conditional statement that the standalone doesn’t recognize. In IE6, the last page actually looks like the page before it, and IETester depicts this behavior accurately.

Another thing I didn’t add to the comments on those pages is that the layout is messed up in IE6. The thumbnails appear in 3 columns instead of 4, and there is extra space on the right. You can see this for yourself without installing anything if you go to Total Validator, paste in this url, and choose IE6 from the dropbox where it says “Screenshot”. The url and screenshot are all you need to fill in/choose, then submit at the bottom, wait for it to process, and scroll down to see the screenshot.

The results in Safari, Opera, Flock, and Google Chrome (all on Windows) were all the same as the results in Firefox. This goes for the page used in this tutorial as well as the experimental pages, and IE6 is the only browser I tested with that doesn’t display the initial code correctly.

LesaMay 17th, 2009 at 6:54 pm

I couldn’t figure out a good IE6-friendly solution that didn’t entail more code than what I was going for, so a quick “fix” is to make each thumbnail clickable. The anchor link tags are already in place, so all you have to do is change the # to the url of the image.

So instead of:

<div id="gallery">
<a href="#"><img src="frozen_lake.jpg" alt="Frozen Lake" title="Frozen Lake" /></a>
<a href="#"><img src="sunrise.jpg" alt="Sunrise" title="Sunrise" /></a>
<a href="#"><img src="fountain.jpg" alt="Fountain" title="Fountain" /></a>
<a href="#"><img src="peacock.jpg" alt="Peacock" title="Peacock" /></a>
<a href="#"><img src="boat.jpg" alt="Boat" title="Boat" /></a>
<a href="#"><img src="sunset.jpg" alt="Sunset" title="Sunset" /></a>
<a href="#"><img src="neon_grill.jpg" alt="Neon Grill" title="Neon Grill" /></a>
<a href="#"><img src="old_print_shop.jpg" alt="Old Print Shop" title="Old Print Shop" /></a>
<br style="clear:both;" />
</div>

You end up with:

<div id="gallery">
<a href="frozen_lake.jpg"><img src="frozen_lake.jpg" alt="Frozen Lake" title="Frozen Lake" /></a>
<a href="sunrise.jpg"><img src="sunrise.jpg" alt="Sunrise" title="Sunrise" /></a>
<a href="fountain.jpg"><img src="fountain.jpg" alt="Fountain" title="Fountain" /></a>
<a href="peacock.jpg"><img src="peacock.jpg" alt="Peacock" title="Peacock" /></a>
<a href="boat.jpg"><img src="boat.jpg" alt="Boat" title="Boat" /></a>
<a href="sunset.jpg"><img src="sunset.jpg" alt="Sunset" title="Sunset" /></a>
<a href="neon_grill.jpg"><img src="neon_grill.jpg" alt="Neon Grill" title="Neon Grill" /></a>
<a href="old_print_shop.jpg"><img src="old_print_shop.jpg" alt="Old Print Shop" title="Old Print Shop" /></a>
<br style="clear:both;" />
</div>

If you’d like, you may also add a conditional statement that will only be seen by people who use IE6 or older versions of IE, such as:

<!--[if lte IE 6]>
<p id="old_ie">You won't see this photo gallery as intended, because you are using an obsolete version of Internet Explorer. Due to its many bugs and security holes, you should <a href="http://www.google.com/#hl=en&q=upgrade+ie&btnG=Google+Search&aq=f&oq=upgrade+ie&fp=1_wXsDL0V4s">upgrade your IE</a>, or switch to a different browser all together. Better browsers than the one you are currently using include, but are not limited to: <a href="http://www.mozilla.com/firefox/">Firefox</a>, <a href="http://www.opera.com/download/">Opera</a>, <a href="http://www.apple.com/safari/">Safari</a>, <a href="http://www.flock.com">Flock</a>, and <a href="http://www.google.com/chrome">Google Chrome</a>.<br /><br />To see enlarged photos in this browser, click on the thumbnails. Then, click the back button in your browser's toolbar to return to this page.</p>
<![endif]-->

You may then style (and even position) that message by targeting #old_ie in your CSS, without it affecting any other browsers.

Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.