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?

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,

Answer 2

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 :hover brightness, and then use something like:

img { 
  opacity: 0.7; 
} 

img:hover { 
  opacity: 1; 
}

Changing the opacity on hover will work:

img:hover {
   opacity: 0.5;
}

Fiddle

Answer 3

The original CSS has:

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

Fiddle: http://jsfiddle.net/praveenscience/hfUpk/

Answer 4

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

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/

Answer 5

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

Answer 6

you can use opacity value between 0.1 to 1 very light and 1 value is dark (default)

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