Bild Glow auf Mouse Hover?

Question

Ich habe diesen Effekt gesehen, wo, wenn die Maus über einem Bild ist, dieses Bild aufleuchtet. Ich spreche nicht von einem Randglühen, ich meine die Farben im Bild leuchten auf. Ich habe festgestellt, dass es eine Bibliothek mit dem Namen Pixastic gibt, der Glow-Effekt kann hier gesehen werden.

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

Gibt es eine Möglichkeit, diese Wirkung auf Mausbewegung auf das Bild anzuwenden? Ich versuche einen Knopf zu machen, der leuchtet.

Danke!

Answer 1

Sie haben eine Maus über Ereignis wie diese zu erstellen:

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

Die erste Funktion wird ausgelöst, wenn Sie das Bild mit der Maus-Cursor eingeben. Die zweite Funktion wird aufgerufen, wenn die Maus den Bildbereich verlässt. Dies wird benötigt, um das Bild in seinen Anfangszustand zurückzusetzen.

Answer 2

Sind Sie auf der Suche nach so etwas?

Zurb Glow Button

Für alle Ihre Maus Abenteuer, würde Ich mag diese

HoverAlls jquery plugin

Answer 3

empfehlen Wie Sie im Pixastic Beispiel zu sehen, wird die demo() Funktion auf Absenden des Formulars aufgerufen.

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

So haben Sie Sie glow.js in Ihrem Projekt und rufen Sie diese Funktion auf schweben umfassen.

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

Oder revert() wie die sample zeigt

Answer 4

Hallo können Sie die Bild-Glühen auf Maus Hover-Effekt mit CSS sowie

Bitte überprüfen Sie die Live-Demo geben: -http://jsbin.com/inenet/12/edit

or you can read the tutorial of css hover effects