4

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!

alik
  • 3,820
  • 9
  • 41
  • 55
  • "I have seen this effect where when mouse is over an image, that image glows up." - where did you see it? – thirtydot Mar 28 '12 at 09:54

4 Answers4

5

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.

Alp
  • 29,274
  • 27
  • 120
  • 198
3

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

Shailender Arora
  • 7,674
  • 2
  • 31
  • 35
2

Are you looking for something like this?

Zurb Glow Button

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

HoverAlls jquery plugin

cyberfly
  • 5,568
  • 8
  • 50
  • 67
  • The Zurb glow button is actually made using css colors. I am trying to get an image (png) to glow. – alik Mar 28 '12 at 10:01
  • HoverAlls looks really cool, but not really any glow affect there too. any other idea? – alik Mar 28 '12 at 10:02
1

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

Frank van Wijk
  • 3,234
  • 20
  • 41