在悬停时点亮图像

Question

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

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

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

Answer 1

您可以使用css图像过滤器,如下所示:

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

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

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

http://jsfiddle.net/62bCB/

干杯,

Answer 2

据我所知,由于蓝色背景,此时你不能用纯CSS做你需要的东西.我认为你最好的选择是在photoshop中编辑图像作为:hover亮度,然后使用如下内容:

img { 
  opacity: 0.7; 
} 

img:hover { 
  opacity: 1; 
}

在悬停时更改不透明度将起作用:

img:hover {
   opacity: 0.5;
}

小提琴