CODEWITHSUNDEEP
htmlcssopacity
lawls
lawls

Reputation: 1508

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.

Upvotes: 14

Views: 86390

Answers (6)

Shahnawaz
Shahnawaz

Reputation: 105

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

Upvotes: 1

user3268442
user3268442

Reputation: 51

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

Upvotes: 1

jerboa88
jerboa88

Reputation: 458

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,

Upvotes: 36

Andy
Andy

Reputation: 14575

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

Upvotes: 25

smurfarita
smurfarita

Reputation: 148

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/

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

The original CSS has:

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

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

Upvotes: 2

Related Questions