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. Hier meine 2 HTML-Dateien: DiaShow.html ruft die Zusammenstellung Fotoblock.html mit den wenigen CSS-Funktionen auf. Was fehlt darin? Was mache ich falsch? Vielleicht könnt ihr mir helfen. DANKE.


    DiaShow.html:


    Fotoblock.html:

  • Das so nicht geht, liegt ja daran das der <label> da ja der parent ist und sich das Bild daran ausrichtet. In der Anordnung von deinen HTML ist das ohne JS eigentlich nicht bis kaum möglich.
    Ich würde das HTML etwas anders aufbauen damit es ohne JS und ohne fusch geht.


    Mit Pfusch könnte man es so machen https://basti1012.bplaced.net/…n_meiner_Fotoshow_mit_CSS
    nur die Lösung finde ich selber nicht schön. Wenn ich später zu Hause bin und bis dahin noch keine andere Lösung gepostet wurde, mache ich mal nee bessere Lösung

  • Danke basti1012,
    es sieht zwar schon anders aus aber noch nicht ganz so wie ich es gern hätte. Die Positionierung ist immer gleich, auch dann wenn ich in der letzten "Zeile" ein Bild auswähle - das Original liegt außerhalb und ist nicht zu sehen.
    Wie es aussieht, bin ich mit dem Lösungsansatz von Werner Zenk auf dem Holzweg.

  • So sollte es gehen. So als Notlösung.

    Code
    1. input[type='checkbox'].zoom:checked ~ img {
    2. transform: scale(4.0, 4.0);
    3. cursor: zoom-out;
    4. margin:auto;
    5. position:absolute;
    6. top:0;
    7. bottom:0;
    8. left:0;
    9. right:0;
    10. }


    Zum Testen habe ich den iFrame auf 100% height und width gestellt. Sieht besser aus.
    @edit: Basti hat ja die gleiche Idee gehabt. Mit margin:auto gehts aber etwas besser.