Opacity for the thumbs
I've been just toying with the CSS opacity to make fancier image thumbnail rollovers, it's actually quite easy. The idea is when you have a thumbnail photo gallery to make the thumbs semi-transparent and, on mouse over, to remove the transparency and show the real image as is.
All it takes is this little piece of CSS:
a img { opacity: 0.55; filter:alpha(opacity=55); } a:hover img { opacity: 1; filter:alpha(opacity=100); }
Here's a demo. CSS file is here.
The demo uses Y!API to get a few images (I never seem to have good images laying aroud when I need them). The API call gets JSON output from the Yahoo! search API to make it easy (and server-side free) to display the results. You may peek into the JS source if you're curious (more Y! JSON search API here), but doesn't have anything to do with the main purpose - the thumbs rollovers.
May 5th, 2006 at 5:19 am
hmm that would be useful… problem i don't have the time to update my blogs templates at the moment
hmm fading out images when mouse is over them… great tip for designers
May 5th, 2006 at 6:01 am
I'm not sure opacity validates though.
May 5th, 2006 at 9:24 am
Yep, unfortunatelly this is true, neither "opacity", nor IE's "filter" validates.
May 7th, 2006 at 9:34 am
Hmmm. Nor works. My IE6 sp2 on a PC reveals nothing on mouseover (the good news, I guess, is that the demo images aren't semi-transparent, either).
May 7th, 2006 at 11:21 pm
Thanks stk, I didn't test on XP/SP2/IE6 but I'll try it as soon as I can.
May 8th, 2006 at 6:02 pm
For the standards nazis: You can cheat the validator by attaching onmouseover and onmouseout JS events that set these CSS properties.
Sure, it's cheating but you'll belong to the 'cool kids' with valid CSS.