[CSS] Bilderzoom bei MouseOver

[Zerogiven]

Geht nicht? Ohne Java-Script? Nur mit CSS? Geht doch!

Also, das einzige Problem, das es gibt, ist das der "Hover" Effekt von CSS nur bei Hyperlinks funktioniert. Damit man trotzdem gezielt Bilder per MouseOver vergrössern lassen kann, und nicht plötzlich jeder einzelne Link vergrössert wird, verwenden wir einen kleine eigene Hyperlink-Klasse.
Als erstes einmal der Code:

Code:

<style type="text/css">
a.meinBild:link .zoom {
width : 80px;
height : 80px; }

a.meinBild:hover .zoom {
filter='()';
width : 220px;
height : 220px; }
</style>

In dem Bereich "a.meinBild:link .zoom" könnt ihr bei width & height die Startgrösse des Bildes angeben.
Bei "a.meinBild:hover .zoom" könnt ihr unter width & height die Grösse angeben, wenn man mit der Maus über das Bild drüber fährt.

Zur Anzeige und Verwendung von diesem CSS, schreiben wir das Bild in HTML so hin, das vergrössert werden soll:

Code:

<a href="#" class="meinBild"><img src="meinBild.gif" class="zoom"></a>

Hier habe ich noch eine Demo Seite:
LINK

mfg
Zerogiven

© by http://www.boldluck.at