The css explained

Preamble

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

Photo gallery container

This is the container div for the photo gallery.

.gallery {
/* absolute positioned preview image needs this div to be relatively positioned */
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 should implement in CSS3 opacity: 0.6;

IE8 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";

Early IE browsers (IE5, IE6 & IE7) 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;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
-moz-opacity: 0.60;
-khtml-opacity: 0.6;
}

.gallery a:visited img {
opacity: 0.6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
-moz-opacity: 0.60;
-khtml-opacity: 0.6;
}

.gallery a:hover img {
opacity: 0.9;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
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 #9ff;
}

/* 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;
}

/* for old ie, but can't remember why, can dispense with now ie6 is on its last legs */
.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 text description block

The -moz-border-radius is Mozilla specific (it works in Firefox, Mozilla & Netscape), while -webkit-border-radius deals with Chrome/Safari browsers. 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 text block */
width: 250px;
/* position of preview text block from top of preview image */
top: 200px;
/* position of preview text block from left of preview image */
left: 25px;
/* border-radius (round corners) of text block for various browsers */
border-radius: 12px;/* official css3 setting (most modern browsers will recognise) */
-moz-border-radius:12px;/* mozilla browsers */
-webkit-border-radius: 12px;/* safari/konqueror old */
/* 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 settings for various browsers */
opacity: 0.8;/* official css3 setting (most modern browsers will recognise) */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";/* ie8 */
filter: alpha(opacity=80);/* ie5, ie6, ie7 */
-moz-opacity: 0.80;/* mozilla old */
-khtml-opacity: 0.8;/* safari/konqueror old */
}

/* no underline on preview text */
.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;
}