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.

Answer 2

Hi you can give the Image Glow on Mouse Hover effect with CSS as well as

please check the live demo:- http://jsbin.com/inenet/12/edit

or you can read the tutorial of css hover effects

Answer 3

Are you looking for something like this?

Zurb Glow Button

For all your mouse adventure, I would like to recommend this

HoverAlls jquery plugin

Answer 4

As you see in the Pixastic example, the demo() function is called on submitting the form.

function demo() {
    Pixastic.process(document.getElementById("demoimage"), "glow", {
        amount : $("#value-amount").val(),
        radius : $("#value-radius").val()
    });
}

So you have you include glow.js in your project and call this function on hover.

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

Or revert() like the sample shows