mouseover mit CSS

    Hallo,

    ich möchte auf einer Webseite thumbnails implementieren, die bei mouseover das vergrößerte Bild anzeigen. Auf der Suche nach Ideen für die Umsetzung bin ich auf folgende Seite gestossen:
    Stu Nicholls | CSSplay | Cross browser multi page photo gallery mark 2

    Die grundsätzliche Idee gefällt mir und ich hab den code dazu (Seitenquelltext) auch schon unter die Lupe genommen. CSS Grundlagen beherrsche ich, das meiste für mich intressante habe ich auch schon aus dem code "extrahiert", aber das hier ist schon höhere Kunst und ich finde was nicht heraus:

    Mir gefällt die Idee des Quadrats mit den thumbnails drin, aber ich hätte es gern, wenn das nicht erst hidden wäre, einen link wie "Portraits" oder "Birds" den man erst mit der Maus berühren muss, damit das Quadrat aufgeht, brauche ich nicht. Wie kann ich den code dahingehend modifizieren, dass das sofort ein Quadrat mit den thumbnails drin auf der webseite erscheint?

    Danke für Eure Hilfe! Kanila

    ja, der 2. link hilft mir weiter, wobei das auch noch nicht die Lösung des Problems ist, und das ist, dass das Ganze in einem Container staatfinden muss und dabei passiert es dann, dass das vergrößerte Bild nicht vollständig angezeigt wird, weil es über die Begrenzung hinaus gehen würde. Deswegen gefiel mir diese Quadrat bei meinem link gut und das das ganz große Bild auch dort in den Rahmen positioniert wird.
    Ich werde mal die Idee mit der Tabelle aufgreifen, da bekomm ich dann eher margin und padding umgesetzt
    Danke erst mal, und vielleicht hat ja noch jemand eine Idee, wie ich meine Ursprungsidee umgesetzt bekomme (da ist ja leider alles auf den Überschriften-links aufgebaut, so dass die nicht einfach zu umgehen sind)

    sieht auch ganz gut aus, allerdings ohne mouseover-Effekt

    (und was mir nebenbei bemerkt auffiel: für den IE fehlt ein text-decoration:none für die links, im FF wirds ohne blauen Rahmen dagestellt. Dann habe ich noch ein

    display:inline-block; entdeckt, kann auch nicht von jedem Browser interpretiert werden, meine ich gelesen zu haben)

    mal sehen, ich hab jetzt nochmal ganz neu angefangen und pack mir alle Elemente die mir gefallen rein...

    Also es nur Experimente und sollen/können/müssen weiterentwickelt werden. Display:inline-block kann durch float:left ersetzt werden. Einheitliche Rahmen können definiert werden. Übrigens das zweite Bsp. hovert.

    Hallo,

    Die webseite schau ich mir insgesamt noch genauer an :) 2.Beispiel? weiss grad nicht, was du meinst, ich hab nur Galerie06 bei dem link auf dem Schirm, und da hovert nix.

    Ich hab mich aber jetzt für die Variante von sejuma entschieden(mit eigenen Variationen natürlich) , lass die Abstände etwas größer, mach die large-Bilder dann gleich auch ein bischen größer und verzichte auf den extra-link, den man ohnehin immer wieder extra wegklicken muss. Das Container-Problem hab ich mit einem overflow:visible gelöst (ich hoffe, das können alle Browser ;) )

    Danke für Eure Hilfe!

    Bis zum nächsten Problem dann....:D:rolleyes::cool:, Kanila