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.
Comments? Find me on BlueSky, Mastodon, LinkedIn, Threads, Twitter
