在任何背景上突出显示图像(悬停时)

Question

当鼠标指针悬停在某些图像上时,通常需要点亮某些图像(增加亮度).

我所知道的一种适用于白色背景的技术是降低悬停时的不透明度,这实际上通过让更多的白色通过来增加亮度.问题显然是它只能在白色背景上工作.

是否有任何我可以添加到我的图像的CSS

一个.为图像添加一个白色背景,使其完全适合,以便在任何颜色背景上发生相同的点亮效果,或

湾 在不添加白色背景或完全使用不透明度的情况下实现相同的效果

Answer 1

用div封装你的图像

<div class="brightness">
    <img  src="test.jpg">
</div>

并应用好的CSS:

.brightness {
    background-color: white;
    display: inline-block;

}
.brightness img:hover {
    opacity: .5;
}

小提琴:http://jsfiddle.net/5yush/

Answer 2

image:hover { filter: brightness(50%); }