Moin!
Ich möchte eine Gallerie aus reinem HTML und CSS erstellen.
Entweder mit vor/zurück Schaltflächen oder mit Thumbnails oder beides zusammen.
Die Anzahl der Bilder ist unterschiedlich und auch die Ausmaße derer kann unterschiedlich sein.
Ich habe 2 Flex-Container die je 50% Breite haben. In dem einen steht Text und in dem anderen die Bilder.
Bei mobilgeräten wird erst der Text und dann die Bilder angezeigt. Bei Desktop, Tablet usw. möchte ich das anders haben.
Da die unterschiedliche Anzahl der Bilder auf der einen Seite den Text überragt, scrollt man somit immer eine Hälfte Bilder und auf der anderen ist der Text schon längst fertig.
Also dachte ich an eine Gallerie mit input type=radio.
Dazu habe ich die Bildhälfte nochmals unterteilt in eine Thumb (10% der restlichen Breite) und eine Bilder (90% Breite).
Wenn ich im Thumb Bereich nun mit <label> und <input> arbeite, kann ich, wenn ich im css auf :checked prüfe, die zugehörige id im Bild bereich nicht ansprechen.
Beispiel:
<div class="Beschreibung">
<div class="galleriebilder">
<div class="thumb">
<label><input type="radio" name="gallerie" id="thumbnail1"><img src="bild1.jpg" /></label>
<label><input type="radio" name="gallerie" id="thumbnail2"><img src="bild2.jpg" /></label>
</div>
<div class="bildanzeige">
<img id="bild1" src="bild1.jpg" />
<img id="bild2" src="bild2.jpg" />
</div>
</div>
<div class="Text">
</div>
</div>
Wenn ich jetzt im css auf :checked prüfe, passiert nichts, egal welche Selektoren ich verwende.
Beispiel:
#thumbnail1:checked #bild1{opacity:1;}
Meinem Verständnis nach, da eine id ja nur einmal vorkommen darf und eine Klasse mehrmals, müsste ich damit doch direkt die Elemente ansprechen können, egal wo sich sich im Dokument befinden.
Positioniere ich die Bilder von Bildanzeige absolut überlagern sich sich nicht nur, wie gewünscht, sondern werden auch breiter und überlagern damit auch die restlichen 90% Breite die ihnen eigentlich nur zusteht.
Ich hatte schon überlegt, mit z-index und opacity zu arbeiten, doch auch damit habe ich bisher keinen Erfolg erzielt.
Wo ist mein Denkfehler?