The css explained

Preamble

I've added an explaination of what is going on and what you can tweak in the /* comments */ next to the relevent css.

Photo gallery container

This is the container div for the photo gallery.

.gallery {
/* absolute positioned preview image needs this */
position: relative;
/* width of 4 times 149px thumbs + 2px margin + 1px border */
width: 624px;
/* height of 4 times 112px thumbs + 2px margin + 1px border */
height: 472px;
margin: 1em auto;
}

Note that the margin and border figures are multiplied by 8 for 4 pictures.

Opacity settings

An explaination of the opacity command for various browsers :

All browsers opacity: 0.6;

IE browsers filter: alpha(opacity=60);

Early Mozilla browsers -moz-opacity: 0.60;

Early Safari/Konqueror browsers -khtml-opacity: 0.6;

Note: Setting the opacity to 0.9 instead of 1.0, will eradicate a flicker on hover bug in Firefox and Safari.

If you don't like the opacity, but want to keep the gallery you can delete the 3 lines of code below in the css file.

/* 0.1 = more opaque, 1.0 = less opaque or fully transparent */
.gallery a img {
opacity: 0.6;
filter: alpha(opacity=60);
-moz-opacity: 0.60;
-khtml-opacity: 0.6;
}
.gallery a:visited img {
opacity: 0.6;
filter: alpha(opacity=60);
-moz-opacity: 0.60;
-khtml-opacity: 0.6;
}
.gallery a:hover img {
opacity: 0.9;
filter: alpha(opacity=90);
-moz-opacity: 0.90;
-khtml-opacity: 0.9;
}

Thumbnail images

.thumb, .no-thumb {
float: left;
/* if width is changed .gallery width must be altered too */
width: 149px;
height: 112px;
/* if margin is changed .gallery width must be altered too */
margin: 2px;
}
/* if border is changed .gallery width must be altered too */
.thumb {
border: 1px solid #000;
}
/* set colour to your background colour */
.no-thumb {
border: 1px solid #fff;
}
/* ie & pre-opera 9.0 shows underline if not in */
.thumb a img {
display: block;
}
/* removing this will make the world cave in, don't do it :) */
.thumb a span {
display: none;
}
/* in for ie I think, but can't remember why! */
.thumb a:hover, 
.thumb a:active, 
.thumb a:focus {
background: transparent;
}

Preview images

.gallery a:hover span {
display: block;
position: absolute;
/* width of preview image */
width: 300px;
/* height of preview image */
height: 225px;
/* position of preview image from top of gallery div */
top: 124px;
/* position of preview image from left of gallery div */
left: 161px;
}

Preview photo title block

The -moz-border-radius is Mozilla specific (it works in Firefox, Mozilla & Netscape). This should be implemented as border-radius when CSS3 arrives, see the W3C CSS3 Backgrounds and Borders Module for details.

.thumb em {
position: absolute;
/* width of preview title */
width: 200px;
/* position of preview title from top of preview image */
top: 196px;
/* position of preview title from left of preview image */
left: 50px;
/* round corners of title */
-moz-border-radius: 12px;
/* green background colour, change to whatever your want */
background: #ab5;
/* text colour */
color: #036;
/* font weight, size/line height, family */
font: normal 12px/20px verdana;
/* text align */
text-align: center;
/* opacity all */
opacity: 0.8;
/* opacity ie */
filter: alpha(opacity=80);
/* opacity mozilla old */
-moz-opacity: 0.80;
/* opacity safari/konqueror old */
-khtml-opacity: 0.8;
}
/* no underline on preview title */
.thumb a {
text-decoration: none;
}

Extras

/* no border on images */
a img {
border: 0;
}

/* clear floats */
.clear {
height: 0;
line-height: 0px;
font-size: 0;
clear: both;
}