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 :) )