jquery image light up effect

[joepk]

Hi guys,

I’m looking for a jquery script effect for images on my portfolio. I dont want to use the fade effect because it makes the background pass trough. I simply want the image to light up when the user hovers over it.

Anyone knows if this exists?

Thanks!

[cpyle0819]

You could always do a box-shadow on hover and change the color ( http://jsfiddle.net/bFXzr/ )but colored shadows can look goofy. I’m not sure what you mean by “light up.” There’s bound to be an example somewhere out there…

Some jQuery examples..http://www.inwebson.com/jquery/jquery-image-hover-effects/

Some better examples that focus on CSS3 http://tympanus.net/Tutorials/OriginalHoverEffects/

[joepk]

Hi thanks for the response! With light-up I mean the image gets a sort of white overlay. That is the effect I want.

I’ve seen the examples in your first link but the second one is very nice, kind of what i’m looking for. How do i rip the script and adjust it?

[joepk]

Oh I see it is done with CSS3 so it doesnt work in IE. How to get this done with jQuery?

[cpyle0819]

Still learning JS and jQuery. Sorry.

[SheeEttin]

For images on dark background, you can use the reverse of what you’d use for a light background, i.e. start at 0.5 opacity then go to 1.0 on hover (building from cpyle0819’s example):

http://jsfiddle.net/3mYmP/

Assuming you’re okay with it starting out a little faded. Some UIs might use this to indicate it’s disabled, so be careful!

[Author]

Posts