CSS3 Grayscale Transition für Images

[xuLLix]

Hallo,

ich habe gerade mein Konzept für eine neue Portfolioseite fertig. Und ich möchte es Minimalistisch realisieren mit Ribbons und anderem Klimbim...

Bilder sollen Grau sein und wenn man sie "hovert" sollen sie Farbig werden.

Da ich, um mal ein bisschen tiefer in die Materie zu kommen, alles in CSS3 und HTML5 realisieren will, komme ich an diesem Punkt nicht weiter.

Ich habe nur das hier gefunden... und frage mich, ob das nicht auf ohne JQuery geht... der Tooltip geht ja auch ohne JQuery...
Vielleicht habt ihr ja eine Idee und könnt mir fix helfen... google spunkt immer nur diese Versionen aus... was daran liegen könnte, das ich nicht genau weiß wonach ich googeln soll

Bin für alle Tipps dankbar, auch für die bösen "let me google that for you" Tipps

[simonpicos]

was mir auf die schnelle einfällt: http://dabblet.com/gist/1886678

ein div in ein anderes verschachtelt, den inneren das greyscalebild als bg geben, dem anderen das farbbild.(am besten als sprite..) Bei hover das inner per opacity ausblenden.

[xuLLix]

Darauf bin ich auch schon gekommen das mit einer Überlagerung zu realisieren... aber irgendwie hatte ich gehofft, dass es schöner geht

Vielleicht fällt den anderen ja was ein.

Vielen für die Hilfe Simonpicos

Zitat von simonpicos

...am besten als sprite...

Was meinst damit... muss ich mal googlen

[simonpicos]

Zitat von xuLLix

Darauf bin ich auch schon gekommen das mit einer Überlagerung zu realisieren... aber irgendwie hatte ich gehofft, dass es schöner geht

Vielleicht fällt den anderen ja was ein.

Vielen für die Hilfe Simonpicos



Was meinst damit... muss ich mal googlen

http://css-tricks.com/css-sprites/


für webkit nightlies (heist das bei denen auch schon so?? ) gibt es die css filter() funktion. Aber natürlich nicht alltagstauglich. Sonst fällt mir nichts ein. ABber vielleicht hat ja noch jemand ne andere idee..

[xuLLix]

Hatte mir die CSS-Sprites Technik auch schon angesehen... aber danke nochmal...

Ich muss mich da nochmal mit beschäftigen... Deine Methode ist auch gut... Dachte halt man könnte sich das zweite Bild sparen, wobei ich sowieso nur mit CSS Arbeite und somit die Downloadzeiten im Rahmen bleiben sollten auch wenn ich noch ein zweites Thumbnail einbaue

[SineTempore]

soweit ich weiß gibt es noch svg filter. leider nur für den firefox :/ die filter eigenschaft unterstützen, soweit ich das mitbekommen habe leider auch in naher zukunft die wenigsten browser mit den standard vorgaben des w3c (u.a. grayscale).

EDIT: wegen svg: http://stackoverflow.com/a/4028908

EDIT2: hier nochmal was ähnliches: http://stackoverflow.com/a/8896020

[xuLLix]

Um es aber auf alle Browser ausweiten zu können wird mir die JQuery-Variante oder die Variante von Simonpicos helfen.

Danke aber auch für deine Mühe SineTempore