How did he do this mouse-over effect?

[search66]

http://www.oreo-speaks.com/photoblog/index.php

Anyone have an idea on how he gave the thumbnails this effect?

[skennedy1217]

It is accomplished with CSS. Below is the way it is done in the Visual Experience template (the second two style tags being the relevant ones).

#central img {
border:1px solid #999999;
padding:2px;
background-color:#FFFFFF;
margin:5px;
}

#central a img {
filter: alpha(opacity=70);
opacity: 0.70;
}

#central a:hover img {
filter: alpha(opacity=99);
opacity: 0.99;
}

[Joe[y]]

in case you care - filter and opacity aren't valid css - but this never stopped me from using them! you're stylesheet just won't validate.

[tinyblob]

there's also _moz-opacity (or something similar), but it only works in firefox

[raminia]

btw, I think this effect is not favorable in the long run.

[search66]

And why's that?

[search66]

It is accomplished with CSS. Below is the way it is done in the Visual Experience template (the second two style tags being the relevant ones).

#central img {
border:1px solid #999999;
padding:2px;
background-color:#FFFFFF;
margin:5px;
}

#central a img {
filter: alpha(opacity=70);
opacity: 0.70;
}

#central a:hover img {
filter: alpha(opacity=99);
opacity: 0.99;
}

Where is this CSS file? And should I nuke my 'thumbnail' CSS definitions? This is what I have now...

.thumbnails {
padding:5px;
border: 0px;
}
.thumbnails:hover {
border: 1px dotted #a9a9a9;
}
.current-thumbnail {
padding:5px;
border:1px dotted #666;
}

.current-thumbnail {
padding:5px;
border:1px dotted #666;
}

[Joe[y]]

your code should be :


.thumbnails {
padding:5px;
border: 0px;
filter: alpha(opacity=70);
opacity: 0.70;
}
.thumbnails:hover {
border: 1px dotted #a9a9a9;
filter: alpha(opacity=99);
opacity: 0.99;
}
.current-thumbnail {
padding:5px;
border:1px dotted #666;
}

.current-thumbnail {
padding:5px;
border:1px dotted #666;
}

[Joe[y]]

though also on second thoughts be careful to also include similar css for links .thumbnails or it won't work in IE.

[tinyblob]

And why's that?
you're always best to stick with the standards and specifications.. there are a lot of exciting and experimental new features out there, but they're just that - experimental.. and the chances are that they won't validate.
i mean sure.. some popular browsers "misinterpret" the web standards a bit.. but that's no excuse to stray from them ;)

[search66]

']though also on second thoughts be careful to also include similar css for links .thumbnails or it won't work in IE.

Thanks for the code... many thanks... I'm not sure I follow what you mean by including similar css for links .thumbnails..

That's the crux of my problem now, is that it's not working in IE.

you can check out what I mean: blog.webnigma.com

[Joe[y]]

ie, also do the same with .thumbnails a {} and .thumbnails a:hover {}

ie, just add the a (for the link) in.

[search66]

Right... so I did as you suggested; and it's still not working for IE.

Check out my code...

.thumbnails {
padding:5px;
border: 0px;
filter: alpha(opacity=70);
opacity: 0.70;
}

.thumbnails a {
padding:5px;
border: 0px;
filter: alpha(opacity=70);
opacity: 0.70;
}

.thumbnails:hover {
border: 1px dotted #a9a9a9;
filter: alpha(opacity=99);
opacity: 0.99;
}

.thumbnails a:hover {
border: 1px dotted #a9a9a9;
filter: alpha(opacity=99);
opacity: 0.99;
}

.current-thumbnail {
padding:5px;
border:1px dotted #666;
}

.current-thumbnail {
padding:5px;
border:1px dotted #666;
}

[Connie]

did you check your CSS with validator.org?

I am repeating my mantra:

if you have no Firefox installed, download it, install it

then open the page in Firefox
use the webtools, (menu: TOOLS) and validate the CSS
you will get a lot of useful hints..

[Joe[y]]

connie - we have already established that opacity and filters will result in invalid CSS so i don't think that is of any concern.

@search66 - i'm not at home right now and i don't really have the time to look into this closer but look at my development site and the code i used at http://dev.jlspurling.com/pixelpost/1.5/ and the stylesheet at the same url + template/lightwhitetwo/style.css

[unmake]

FWIW, 'opacity' is part of the CSS3 specs..

Honestly, while it's all well and good to adhere strictly to web-standards, and have pages that validate 100%, losing it due to something like opacity isn't worth getting worked up about; if it's really important, you can use a bit of javascript, like this:

(snip)
document.write("<style type='text/css'>#displayarea {opacity:0.50; filter:alpha(opacity=50);}</style>");
(snap)

to 'inject' the CSS on the client-side.

[Joe[y]]

well w3 doesn't validate against css3 yet it would seem:

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fdev.jlspurling.com%2Fpi xelpost%2F1.5%2Ftemplates%2Flightwhitetwo%2Fstyle. css&usermedium=all

that's a stylesheet for an unfinished template and opacity and filter both caused a list of errors. personally it doesn't bother me as together they are cross-browwser compatible and if css3 will accept them i'm happy.

[blinking8s]

i might comment more tonight if i get time...basically there are better ways of doing things usually, the current meathod on the posted site is kinda crummy, and is limited to firefox and ie6 for the most part...which is a majority really

but many major sites use a similar meathod, it's not that big of a deal, or worth sweating over

[search66]

Thanks for the feedback... And I have FireFox... I just don't like it. And the majority of my visitors will be using IE.

Anyway, if someone notices a glitch in my matrix; let me know! Thanks!

[search66]

']connie - we have already established that opacity and filters will result in invalid CSS so i don't think that is of any concern.

@search66 - i'm not at home right now and i don't really have the time to look into this closer but look at my development site and the code i used at http://dev.jlspurling.com/pixelpost/1.5/ and the stylesheet at the same url + template/lightwhitetwo/style.css

That's exactly what I'm looking for, but I can't get to the CSS... getting the old '404'.

[unmake]

That's exactly what I'm looking for, but I can't get to the CSS... getting the old '404'.

try:
http://dev.jlspurling.com/pixelpost/1.5/templates/lightwhitetwo/style.css

[search66]

Thanks... let me check it out

[search66]

Awesome.. thanks!

I forgot to put:

<div id="thumbrow">

before my:

<IMAGE_THUMBNAIL_ROW>