Geek Answers Handbook

Hover image

Take a look at http://www.kickstarter.com .

When you hover over the logo, the image lights up. Is this effect feasible without using another hover image?

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 will not work. to set the opacity to 0.9 and on hover, set the value to 1. But this makes the image too dark by default.

+6
source share
6 answers

As far as I know, you cannot do what you need with pure CSS at the moment, due to the blue background. I think your best bet is to edit the image in Photoshop as its brightness :hover , and then use something like:

 img { opacity: 0.7; } img:hover { opacity: 1; }

Hover opacity change will work:

 img:hover { opacity: 0.5; }

Fiddle Strike>

+18
source

You can use css image filters, for example:

 img:hover {-webkit-filter: brightness(150%); }


Sometimes it looks funny and will only work in webkit browsers, but it is the best solution I could think of. It will also allow you to keep your blue background.

Here jsfiddle shows the Kickstarter logo on a blue background.

http://jsfiddle.net/62bCB/



Cheers

+16
source

Original CSS has:

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

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

+1
source

You have several options, depending on which browsers you need to support. You can make the logo a background image, and then change the image on hover. (or hide the image so as not to flicker)

Or you can try combining CSS opacity and microsoft filters for older versions of IE. http://www.w3schools.com/cssref/css3_pr_opacity.asp

Since you mention that 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/

0
source

You can use this CSS code, which makes the lighting smoother than just instantly bright. Techpp.com and Techlivewire.com also use the same css or similar on their main pages. I couldn't get CSS to write here, since stackoverflow kept giving me errors, so I put them in my mouth. http://paste2.org/1L9H2XsF

0
source

you can use an opacity value from 0.1 to 1 very light and 1 value dark (default)

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

More articles:


All Articles