Light up image on hover

Question

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:hover and 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.

Answer 1

You may be able to use the css image filters, like this:

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.

Here's a jsfiddle showing the Kickstarter logo on a blue background.

http://jsfiddle.net/62bCB/

Cheers,