Vorschaubilder in Galerie beim drüberfahren abdunkeln

[DDpix]

Huhu

ich habe vor meine Galerie etwas aufzupeppen. Ziel ist es, das wenn man mit der Maus über ein Vorschaubild geht (hover) das dieses dann ab dimmt. Jedoch soll das ganze nicht schnell geschehen sondern wie so eine Lampe innerhalb einer halben Sekunde etwas abdunkeln. Ich habe das auf einer anderen Seite mal gesehen und da ging es glaub mit css.

Hoffe Ihr könnt mir weiterhelfen...

Grüße

[Wishu]

Den Fade-Effekt wirst du mit CSS2.1 noch nicht hinbekommen, da gibt es noch keinen Fade-Effekt. Das jQuery Plugin Autoimage soll das können.

Auch gibt es mit CSS nicht die Möglichkeit einfach so ein Bild abzudunkeln – höchstens mit einem transparenten div oder so darüber, schön wäre das aber nicht.

[lig_80]

Wenn ich die Frage richtig verstanden habe, geht das ohne weiteres mit jquery.

Demo: http://huepenbecker-design.de/stuff/fader.htm

edit:
code mal angepasst, ich denke mal, jetzt ist er komplett selbsterklärend.

[Wishu]

Dadurch wird das Bild lediglich transparent. Doch wenn man dem Element in dem das Bild ist dann einen schwarzen Hintergrund gibt, sollte das den gleichen Effekt haben
Danke für den Tipp.

[lig_80]

Das ist mir schon klar. Nur was wäre die Alternative? Ein »abdimmen« über die Bildeigenschaften wäre wesentlich aufwendiger und komplexer. Vor allem dann, wenn das unabhängig vom Sujet den selben Eindruck hinterlassen soll.

Daher ist das »abdimmen« über die Transparenz die simpelste Lösung.

Interessante Effekte kann man natürlich auch mit der Überlagerung von Bildern erreichen. z.B. in den Hintergrund eine entsättigte Variante des gleichen Bildes o.ä. die Möglichkeiten sind da vielfältig.

[DDpix]

So wie im Beispiel meine ich es. Und das das Bild transparent wird is ok da ich eh einen dunklen Hintergrund hab. Wie is der genaue Code?

EDIT: OK hab ihn gefunden