Light up image on hover

问题

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.

回答1:

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

回答2:

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,

回答3:

The original CSS has:

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

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

回答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/

回答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

回答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;
}

来源：https://stackoverflow.com/questions/15275344/light-up-image-on-hover

标签

html

css

opacity