Html 悬停时点亮图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15275344/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Light up image on hover
提问by lawls
Take a look at http://www.kickstarter.com.
When you hover over their logo, the image lights up. Is this effect doable without using a different image on hover?
当您将鼠标悬停在他们的徽标上时，图像会亮起。在悬停时不使用不同图像的情况下，这种效果是否可行？
My first idea was to use ::after:hoverand add a white square with high transparency that covers the logo, but since my logo is placed on a blue background this would not work.Another idea is to set opacity to 0.9 and on hover set it to 1. But this makes the image look too dark by default.
我的第一个想法是使用::after:hover并添加一个覆盖徽标的高透明度白色方块，但由于我的徽标放置在蓝色背景上，因此这是行不通的。另一个想法是将不透明度设置为 0.9 并在悬停时将其设置为 1。但这会使图像在默认情况下看起来太暗。
回答by jerboa88
You may be able to use the css image filters, like this:
您可以使用 css 图像过滤器，如下所示：
img:hover {-webkit-filter: brightness(150%); }
This sometimes looks funny and will only work in webkit browsers, but it's the best solution I could think of. It'll allow you to keep your blue background as well.
这有时看起来很有趣，并且只能在 webkit 浏览器中使用，但这是我能想到的最佳解决方案。它还可以让您保留蓝色背景。
Here's a jsfiddle showing the Kickstarter logo on a blue background.
这是一个在蓝色背景上显示 Kickstarter 徽标的 jsfiddle。
Cheers,
干杯，
回答by Andy
As far as I am aware you can't do what you require with pure CSS at this point, due to the blue background. I think your best bet is edit the image in photoshop to be its :hoverbrightness, and then use something like:
据我所知，由于蓝色背景，此时您无法使用纯 CSS 执行所需的操作。我认为你最好的选择是在 photoshop 中编辑图像使其:hover亮度，然后使用类似的东西：
img {
opacity: 0.7;
}
img:hover {
opacity: 1;
}
Changing the opacity on hover will work:
更改悬停时的不透明度将起作用：
img:hover {
opacity: 0.5;
}
img:hover {
opacity: 0.5;
}
回答by Praveen Kumar Purushothaman
The original CSS has:
原始 CSS 具有：
img:hover {
filter: alpha(opacity=80);
opacity: .8;
}
Fiddle: http://jsfiddle.net/praveenscience/hfUpk/
小提琴：http: //jsfiddle.net/praveenscience/hfUpk/
回答by smurfarita
You have a few choices depending on what browsers you need to support. You could make the logo a background image and then change the image on hover. (or sprite the image so that you don't get a flicker)
根据您需要支持的浏览器，您有几个选择。您可以将徽标设为背景图像，然后在悬停时更改图像。（或对图像进行精灵化，以免出现闪烁）
Or you could try a combination of CSS opacity and microsoft filters for older versions of IE. http://www.w3schools.com/cssref/css3_pr_opacity.asp
或者您可以为旧版本的 IE 尝试组合使用 CSS opacity 和 microsoft 过滤器。 http://www.w3schools.com/cssref/css3_pr_opacity.asp
Since you mention you have a dark background you can try some of the new CSS filters (saturation, brightness etc) but you're out of luck for IE. http://www.html5rocks.com/en/tutorials/filters/understanding-css/
既然你提到你有一个黑暗的背景，你可以尝试一些新的 CSS 过滤器（饱和度、亮度等），但你对 IE 不走运。 http://www.html5rocks.com/en/tutorials/filters/understanding-css/
回答by user3268442
You could use this CSS code which makes lighting up a smoother transition than just instantly bright. Techpp.com and Techlivewire.com also use this same css or one similar to it on their frontpage featured sections. I could not get CSS to post on here since stackoverflow kept giving me errors so I put it in a pastie. http://paste2.org/1L9H2XsF
您可以使用此 CSS 代码，它可以使照明的过渡更平滑，而不仅仅是瞬间变亮。Techpp.com 和 Techlivewire.com 也在其首页特色部分使用相同的 css 或类似的 css。我无法让 CSS 在这里发布，因为 stackoverflow 一直给我错误，所以我把它放在一个馅饼里。http://paste2.org/1L9H2XsF
回答by Shahnawaz
you can use opacity value between 0.1 to 1 very light and 1 value is dark (default)
您可以使用 0.1 到 1 之间的不透明度值非常亮，1 值是暗（默认）
img {
filter: alpha(opacity=100);
opacity: 1;
}
img:hover {
filter: alpha(opacity=70);
opacity: 0.7;
}
