basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    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

    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>