CSS Bilder-Zoom

Dies ist eine Anleiutung, wie man ein kleines Thumbnail-Bild beim Überfahren mit der Maus auf seine volle Größe springen lassen kann.

Wir erstellen eine kleine Box, mit Überschrift, und Textabsatz und Thumbnail, beim Überfahren mit der Maus springt das Thumbnail auf seine volle Größe und der Text wird dynamisch neu umgebrochen.

So soll das Ganze aussehen:

und das wäre das Endergebnis beim Überfahren mit der Maus:


Zunächst schreiben wir den xhtml-Code:

<div id="bildbox"> --> DIV, in dem die Box liegt
<h2>B&auml;rbel</h2> --> Überschrift innerhalb der Box
<a href="Bilder/baerbel.jpg"><img src="Bilder/baerbel.jpg" alt="Bärbel"/></a> --> nur ein Bild ist nötig für Thumbnail und Zoombild
<p>B&auml;rbel - die zickigste Manx-Katze der Welt. Mein Ein und Alles!</p> --> der Text neben dem Bild
<br style="clear:both;" /> --> damit der Bildbox-Container das Bild umschließt, auch wenn nur wenig Text vorhanden ist
</div>

Nun zum CSS:

#bildbox        {
                width: 650px;
                margin: 20px;
                padding: 10px;
                border: 1px solid #000;
                background: #CCC;
                color: #000;
                }
--> Größe, Aussehen und Positionierung der Bildbox

#bildbox a img  {
                float:left; --> Bild links positionieren und rechts vom Text umfließen lassen
                height: 100px;
                width: 124px;
                border: 1px solid white; --> weisser Rahmen
                margin: 0 0 5px 5px;
                }

#bildbox img:hover  {
                width: 500px;
                height: 400px;
                } --> ohne diese Angaben funktioniert das Zoomen in Safari und Opera-Browsern nicht

#bildbox a:hover img{
                width: 500px;
                height: 400px;
                } --> ohne diese Angaben funktioniert das Zoomen im IE nicht
               
#bildbox a:hover    {
                padding: 0;
                } --> ohne diese Angaben funktioniert das Zoomen im IE nicht

#bildbox p      {
                padding: 0;
                margin: 0;
                }

Voilà!