Thumbnail Row hover image CSS help needed

[cbmrj777]

Photoblog in question: http://photoblog.hoguechronicle.com/

I've been playing around setting up our family photoblog and need a little help:

I've validated the page in CSS (and it checks good except opacity errors) and xhtml validates with 2 errors (which I'm not quite sure how to fix :/)

Anyway, on the HOME/Photo pages, I have the Thumbnail Row. I want the hover effect but with the thumbnails darkened by default, going normal when the mouse hovers over them. In my CSS I have:

.thumbnails {

	border:1px solid #fff;

	padding:3px;

	margin:3px;

	vertical-align:bottom;

	filter:alpha(opacity=25);

	-moz-opacity:.25;

	opacity:.25;

	}	

.thumbnails:hover {

	border:1px solid #fff;

	padding:3px;

	margin:3px;

	filter:alpha(opacity=100);

	-moz-opacity:1;

	opacity:1;

	}

.current-thumbnail {

	border:1px solid white;

	margin:0 1px 2px 1px;

	filter:alpha(opacity=100);

	-moz-opacity:1;

	opacity:1;

	}

But online (in Firefox) it appears backwards. Would anyone know what might be going on?

[jaywilliams+]

If you look at your CSS file, you will find that ".thumbnails {" is listed twice.
(Line #180 & 318)

And the later one, line #318, is overriding the code you have in line #180.

So once you remove the duplicate code, you should be all set.

[cbmrj777]

Ahhhh, you're right! (too many late nights with a newborn keeps me bleary eyed! LOL)

And that was originally put there for the Archives thumbnails because those I *did* want bright by default...

Since I need 2 different thumbnails attributes what do you think would work best?

[cbmrj777]

Solved by adding a div to the browse page for those thumbnails:

#archive_thumbs .thumbnails {
	border:1px solid #fff;
	padding:3px;
	margin:3px;
	vertical-align:middle;
	filter:alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
}
#archive_thumbs .thumbnails:hover {
	border:1px solid #fff;
	padding:3px;
	margin:3px;
	vertical-align:middle;
	filter:alpha(opacity=25);
	-moz-opacity:.25;
	opacity:.25;
}

and this to the archive browse page:

<div id="archive_thumbs">
<THUMBNAILS_WHOLE_PAGED></div>

(adding what I did for anyone searching the forums in the future )