Glow image on hover?

Question

I saw this effect when the mouse is above the image, this image glows. I'm not talking about borderline radiance, I mean that the colors in the image glow. I found that there is a library called Pixastic, the effect of radiance can be seen here.

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

Is there a way to apply this effect when hovering over an image? I'm trying to make a button that glows.

Thanks!

Answer 1

You should create a mouse over an 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 launched when the image is entered with the mouse cursor. The second function is called when the mouse leaves the image area. This is necessary to reset the image to its original state.

Answer 2

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

check demo version: http://jsbin.com/inenet/12/edit

or you can read the css hover effects guide

Answer 3

Are you looking for something like this?

Zurb Glow Button

For all mouse adventures, I would recommend this.

HoverAlls jquery plugin

Answer 4

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

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

So, 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() , as the sample shows