Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
Ich verzweifele an meiner Fotoshow mit CSS

Ich verzweifele an meiner Fotoshow mit CSS

Hallo Freunde. Bisher habe ich meine Fotoshows jahrelang immer im gleichen, alten Stil produziert (als Rentner verlasse ich eben ungern eingefahrene Wege). Jetzt sollen diese etwas moderne werden. Beim Anclicken eines Fotos in der Übersicht (4 Spalten, n Zeilen) soll dieses vergrößert und ZENTRIERT angezeigt werden. Eigentlich einfach. Aber das Zentrieren wird nicht auf der Seite, sondern immer nur über dem ausgewählten Bild ausgeführt. Ich finde einfach keine Lösung

Der hier verwendete Code

<!DOCTYPE> <html> <head> <meta charset="utf-8"> <title>Fotoblock.html</title> <style> input[type="checkbox"].zoom { display: None; } input[type="checkbox"].zoom ~ img { transition: transform 0.5s; cursor: zoom-in; } input[type="checkbox"].zoom:checked ~ img { transform: scale(4.0, 4.0); cursor: zoom-out; position:absolute; left:35%; top:30%; text-align:center; transition:1000ms all; } </style> </head> <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" bgcolor="#333300"> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="/image/10.png" width="192" height="110"></label> </body> </html>