Image Glow on Mouse Hover?

Question

I have seen this effect where when mouse is over an image, that image glows up. I am not talking about a border glow, I mean the colors in the image glow up. I found that there is a library called Pixastic, the glow affect can be seen here.

http://www.pixastic.com/lib/docs/actions/glow/

Is there a way to apply this effect on mouse hover on the image? I am trying to make a button that glows up.

Thanks!

Answer 1

You have to create a mouse over event like this:

$("img").hover(
  function () {
    Pixastic.process($(this).get(0), "glow", {amount:0.5, radius:1.0});
  }, 
  function () {
    Pixastic.revert($(this).get(0));
  }
);

The first function is triggered when you enter the image with your mouse cursor. The second function is called when the mouse leaves the image area. This is needed to reset the image to its initial state.