treehouse : what would you like to learn today?
Web Design Web Development iOS Development

jquery image light up effect

  • 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!
  • 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/
  • 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?
  • Oh I see it is done with CSS3 so it doesnt work in IE. How to get this done with jQuery?
  • Still learning JS and jQuery. Sorry.
  • You could look at using opacity on hover and having a white background hidden under the images. I've used this effect in the past.

    So effectively have a container with your image inside, set a background and then for your img:hover have opacity around 0.9 or so and this should bleed the white through. Kind of a reverse overlay if you will.

    Alternatively (or additionally) you could add a white box shadow to the images on hover to give the illusion of a spotlight/brightening, it actually works quite well.