虚拟机拇指_拇指不透明

虚拟机拇指

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.

我一直在玩CSS不透明性，以使图片缩略图更漂亮，实际上非常容易。 这个想法是当您有一个缩略图照片库时，使拇指半透明，然后将鼠标悬停在上面，以除去透明度并按原样显示真实图像。

All it takes is this little piece of CSS:

它所需要的只是这段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.

这是一个演示。 CSS文件在这里。

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.

该演示使用Y！API来获取一些图像(当我需要它们时，我似乎从来没有发现过很好的图像)。 API调用从Yahoo!获取JSON输出。 搜索API，以便轻松(且服务器端免费)显示结果。 你可以窥视到JS源，如果你(以上的Y JSON搜索API！很好奇这里)，但没有什么关系的主要目的-拇指翻车。

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/opacity-for-the-thumbs/

虚拟机拇指