14

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.

4

6 回答 6

34

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,

于 2013-11-11T21:50:22.290 回答
25

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

于 2013-03-07T15:41:25.507 回答
2

The original CSS has:

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

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

于 2013-03-07T15:43:03.203 回答
1

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/

于 2013-03-07T15:42:48.060 回答
1

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

于 2014-02-16T12:16:24.633 回答
1

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;
}
于 2016-09-28T07:05:46.110 回答