Mouse over Effekt erstellen

[robbieW]

Hallo Freunde,

Ich brauche Hilfe bei einem Problem.

Ich habe ein Div Container in der Mitte und in dem ist ein scharfes Bild, in einem div daneben ist ein Bild welches unscharf ist, wenn ich jetzt mit der Mouse auf das unscharfe Bild gehe, soll es scharf werden und das Bild in der Mitte unscharf....

Hier könnt ihr sehen was ich meine.
http://www.der-grafikdesigner.de/new-side/index-start.html

Wie schon beschreiben möchte ich, dass wenn ich zB. auf "Plakate/Broschüren" gehe, dies scharf wird und das große Logo in der Mitte unscharf wird (Fokus Wechsel)

Kann mir jemand helfen?

 

[DubiDuh]

Ich würde die einzelnen Bilder in zwei Versionen machen: scharf und unscharf. Dann würde ich die in einem großen Bild nebeneinander setzen und als background-image: url(...) einbinden. Bei mouse-over hover) setze ich dann die background-position so, dass das scharfe Bild angezeigt wird. Such mal nach CSS Image Sprites.

 

[bezierkurve]

Du kannst auch per JS weichzeichnen. blur.js sieht ganz interessant aus (allerdings nie selbst probiert).

 

[DubiDuh]

Blut.js funktioniert nur in Browsern, die html5 können.

 

[bezierkurve]

Blut? :O Und HTML5 darf man im Jahr 2014 ruhig voraussetzen.

 

[smoe]

Gerade in Firmen läuft ja leider noch so einiges an alten IE-Versionen umher, dafür braucht es dann halt im Notfall einen Fallback. Denn wenn die Seite kaputt aussieht ist das aus Sicht der User immer die Schuld des Betreibers, egal wie weit sie dem Stand der Technik hinterherhinken.

 

[hillepille]

Kann ich nur bestätigen, ich arbeite viel für Behörden und der IE6 war bis zum Ende des XP-Supports dieses Jahr dort weit verbreitet. jetzt sind wir aktuell beim IE8 und IE9, was für Entwickler nicht besonders lustig ist. (Wobei ich den IE9 ja schon fast als fortschrittlich ansehe .) Problem ist das die User selber dort gar nichts installieren dürfen und die IT-Abteilungen kein Interesse an einem Mehraufwand an Support haben. Daher gibts dann Quick & Dirty 08/15 Windowsinstallationen.

Ohne Fallback geht an der Stelle dann nichts.