Hallo,
Ein Beispiel wären die Bilder auf Focus.de
Dort ist gleich eine ausgebleichte Lupe zu sehen, welche sich dann in Farbe und Funktion beim Mouseover zeigt.
Da hast du ja eigendlich deine Antwort schon, du musst einfach einen mouseover-Effekt für das Bild hinzufügen, welches dann die Lupe (ist ein eigenes Bild) verändert.
Kann mir jemand erklären, wie ich diesen Fade In Effekt auf ein Bild legen kann?
Fade in ist bei deinem Beispiel nicht zu erkennen. Die Lupe schaltet von grau direkt auf die farbige Variante um.
Fade in bedeutet das es einen schrittwesen Übergang bietet.
Du musst einfach zwei img-Element erstellen welche absolut über dem Bild positioniert werden, diesen solltest du zum einfacheren Zugriff auch noch eine id zuweisen.
Das farbige Bild muss ausserdem am Anfang unsichtbar sein (http://de.selfhtml.org/css/eigenschaften/positionierung.htm#visibility@title=visibility).
Jetzt musst du nur noch die graue Version unsichtbar machen und die farbige Version anzeigen wenn du mit dem mauszeiger auf das bild zeigst (mousein) und umgekehrt die farbige verschwinden lassen und die graue anzeigen wenn du das bild verlässt (mouseout).
Danke im Vorraus.
Immer gerne :)
Gruß,
Fay