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>