CSS Hovergallerie in Container anpassen. Bitte um Hilfe!

Folgendes Problem:

Es soll eine bereits beinahe völlständig integrierte Image-Hovergallerie, welche auf CSS basiert dem Template entsprechend angepasst werden.

Ich musste den Galleriewechsel vollziehen, da die vorherige bei Ebay/ Hood nicht funktionsfähig war. Mit der Hovergallerie klappt es soweit.

Es sollen also lediglich die vergrösserten Produktfotos dem Container einer festen Höhe angepasst werden, auch sollen sie nicht über den Container herausfliessen falls das Image zu gross sein sollte.

Wie stelle ich das am besten an? Ich komme irgendwie nicht richtig weiter! Vielleicht ist auch irgendwo ein Fehler drin.

Hier mal der HTML & CSS Code, damit man sich ein Überblick verschaffen kann.

[HTML]


    <div class="product_galerie_inside">






[/HTML]

CSS:

.gallerycontainer { border: 1px solid #BFBFBF; border-radius: 5px 5px 5px 5px; height: 375px; margin-bottom: 5px; padding: 5px 0 0; position: relative; } .thumbnail img { border: 1px solid #BFBFBF; border-radius: 5px 5px 5px 5px; float: left; margin-bottom: 5px; margin-left: 5px; position: relative; width: 87px; } .thumbnail:hover, .thumbaktiv { background-color: transparent; float: left; } .thumbnail:hover img, .thumbaktiv img { border: 1px solid lightgray; } .thumbnail span { color: black; left: -1000px; padding: 5px; position: absolute; visibility: hidden; } .thumbnail span img { border-width: 1; padding: 2px; height: auto; width: 200px; } .thumbnail:hover span, .thumbaktiv span { left: 230px; visibility: visible; z-index: 50; }

Leg für den Container eine feste Höhe und Breite fest und gib ihn „overflow: hidden;“. Ist außerdem ein CSS- und kein HTML-Thema.

Danke für den Tipp! Allerdings habe ich noch folgendes Problem:

ich habe in der Gallerie das erste Image auf aktiv gesetzt, da die Fläche sonst leer geblieben wäre. Das klappt auch soweit, allerdings wenn man zwischen den jeweiligen Fotos wechselt überlappen sich die Bilder auf Grund der Grösse.(z.B. wenn ein Image kleiner als das aktive ist) Das ist ziemlich hässlich und ich weiss nicht wie ich dieses Problem lösen kann. Die Grösse anzupassen hat kein Ergebnis gebracht da die Bilder dann verzerrt dargestellt werden.

Da das erste Image auf aktiv gesetzt wurde, verschwindet es demnach nicht wenn ein anderes aufgerufen wird. Wie stelle ich es an, damit das erste aktive in dem Fall verschwinden kann?

Ich benutze diese Gallerie:
http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/#thumb

Auch das ließe sich über overflow lösen. Dann ist eben nur das Bild in dem festen Bereich zu sehen. Alles was darüber hinaus geht wird „abgeschnitten“ bzw. ist einfach nicht mehr zu sehen. Es kommt außer das einzelne Bereiche des Bildes fehlen nicht zu einer qualitativen Verschlechterung.