Bildergalerie mit CSS und Zoom

[Rolf B]

Hallo Kirsten,

ich kann mir nicht vorstellen, wie das funktionieren soll (abgesehen davon, dass es definitiv NICHT funktioniert, wenn ich keine Maus habe). Eigentlich müsste Dir der Hover das Layout zerreißen. Und selbst wenn er es nicht täte, die

Für eine Tastatursteuerung braucht es etwas fokussierbares. Bilder sind das nicht - dafür verwendet man Buttons oder Links. Die kann man mit der :focus-Pseudoklasse behandeln.

Ein Link auf die "funktionierende" Seite wäre sehr interessant. Dann kann man vermutlich auch besser erkennen, was mit der Höhe schiefgeht. Aus deinen aufwändigen Berechnungen, die Du da anstellst, werde ich nämlich überhaupt nicht schlau. Die Berechnung von --w scheint mir komplett daneben - wenn Du 3 Spalten hast, rechnest Du da 100% minus 2*3. Müsste das nicht 100% - var(--gs) * var(--g) sein? Warum verwendest Du --gs überhaupt, wenn Du doch anderswo ständig var(--m) - 1 verwendest?

Was Du jedenfalls beachten musst: Die Berechnungen sind "Live-Werte". Wenn sich dein Grid verbreitert, weil ein Bild durch den Hover breiter wurde, dann verändert sich dein 100% auf einmal. Wenn überhaupt, solltest Du die Breite eines einzelnen Bildes aus der Viewportgröße berechnen und nicht als ein Drittel der "natürlichen" Galeriebreite.

Wenn Du dein CSS posten willst, dann bitte nicht als Bild. Das schreibt keiner ab und es braucht auch viel Speicher. Zum Formatieren von Code verwendet man ~~~ Zeilen. Wie das funktioniert, findest Du in der „Hilfe zur Formatierung der Beiträge“ unter Abschnitt 9, Code. Wenn es Dir nicht 100% gelingt, lass deinen Versuch einfach stehen, wir formatieren das dann fertig.

Rolf