在悬停时点亮图像

Question

看看http://www.kickstarter.com。

当您将鼠标悬停在徽标上时，图像会亮起。如果不在悬停时使用不同的图像，这种效果是否可行？

我的第一个想法是使用::after:hover并添加一个覆盖徽标的高透明度白色方块，但由于我的徽标位于蓝色背景上，因此无效。另一个想法是将不透明度设置为0.9，并在悬停时将其设置为1.但这会使图像默认显得太暗。

Answer 1

据我所知，由于蓝色背景，此时您无法使用纯CSS执行所需操作。我认为你最好的选择是在photoshop中编辑图像为:hover亮度，然后使用类似的东西：

img { 
  opacity: 0.7; 
} 

img:hover { 
  opacity: 1; 
}

<击> 在悬停时更改不透明度将起作用：

img:hover {
   opacity: 0.5;
}

<击> Fiddle

Answer 2

您可以使用css图像过滤器，如下所示：

img:hover {-webkit-filter: brightness(150%); }

这有时看起来很有趣，只适用于webkit浏览器，但它是我能想到的最佳解决方案。它还可以让你保持蓝色背景。

这是一个在蓝色背景上显示Kickstarter徽标的jsfiddle。

http://jsfiddle.net/62bCB/

欢呼声，

Answer 3

原始CSS有：

img:hover {
    filter: alpha(opacity=80);
    opacity: .8;
}

小提琴：http://jsfiddle.net/praveenscience/hfUpk/

Answer 4

根据您需要支持的浏览器，您有一些选择。您可以将徽标设为背景图像，然后在悬停时更改图像。 （或者对图像进行精灵处理，以免闪烁）

或者您可以尝试将旧的IE版本的CSS不透明度和微软过滤器组合使用。 http://www.w3schools.com/cssref/css3_pr_opacity.asp

既然你提到你有一个黑暗的背景，你可以尝试一些新的CSS过滤器（饱和度，亮度等），但你运气不好IE。 http://www.html5rocks.com/en/tutorials/filters/understanding-css/

Answer 5

你可以使用这个CSS代码，使点亮过程比瞬间明亮更顺畅。 Techpp.com和Techlivewire.com也在其首页特色部分使用相同的css或类似的css。我无法在这里发布CSS，因为stackoverflow一直给我错误所以我把它放在一个馅饼。 http://paste2.org/1L9H2XsF

Answer 6

您可以使用介于0.1到1之间的不透明度值  很轻，1值很暗（默认）

img {
    filter: alpha(opacity=100);
    opacity: 1;
}
img:hover {
    filter: alpha(opacity=70);
    opacity: 0.7;
}