Ich verzweifele an meiner Fotoshow mit CSS

Max Boehm

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:

HTML

<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>DiaShow.html</title>
<meta name="language" content="de">
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" bgcolor="#333300" text="#003300" link="#003300" vlink="#003300" alink="#003300">
<iframe height="450" width="800" src="Fotoblock.html" align="left" frameborder="0"></iframe>
</body>
</html>

Alles anzeigen

Fotoblock.html:

HTML

<!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;
}
</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>

Alles anzeigen

basti1012

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/index.php?ordn…otoshow_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

Max Boehm

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.

djheke

So sollte es gehen. So als Notlösung.

Code

input[type='checkbox'].zoom:checked ~ img {
    transform: scale(4.0, 4.0);
    cursor: zoom-out;
 margin:auto;
 position:absolute;
 top:0;
 bottom:0;
 left:0;
 right:0;
}

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.

Tags