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 http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title>Fotoblock.html</title> <meta name="language" content="de"> <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="http://test.4mix.de/01.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/02.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/03.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/04.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/05.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/06.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/07.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/08.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/09.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/10.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/11.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/12.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/13.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/14.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/15.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/16.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/17.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/18.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/19.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/20.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/21.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/22.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/23.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/24.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/25.jpg" width="192" height="110"></label> <label><input type="checkbox" class="zoom"><img src="http://test.4mix.de/26.jpg" width="192" height="110"></label> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!