> ~~~html > <div> > <input type="checkbox" class="read-more-state" id="post-2" /> > > <ul style="padding-left:0em;" class="read-more-wrap"> > <p>lorem</p> > <p>lorem 2</p> > <p class="read-more-target">lorem 3</p> > <p class="read-more-target">lorem 4</p> > <p class="read-more-target">lorem 5</p> > <p class="read-more-target">lorem 6</p> > <p class="read-more-target"><img src="http://u7.tsv-heimbuchenthal.de/images/pictures/w7e1b0c162f210023dafebec4cc24861/w7e1b0c162f350028e3a611d63f9d632/w7e1b131603180018fb5dedcc123c3e0/ErgebnisVorlage2.jpg?w=545&h=50" style="border: 5px solid #eeeeee; border-radius:.25em;"/></p> > <p class="read-more-target">lorem 7</p> > </ul> > > <label for="post-2" class="read-more-trigger"></label> > </div> > ~~~ > ~~~css > .read-more-state { > display: none; > } > > .read-more-target { > opacity: 0,2; > max-height: 0; > font-size: 0; > transition: .25s ease; > } > > .read-more-state:checked ~ .read-more-wrap .read-more-target { > opacity: 0; > font-size: inherit; > max-height: 999em; > } > > .read-more-state ~ .read-more-trigger:before { > content: 'Show more'; > } > > .read-more-state:checked ~ .read-more-trigger:before { > content: 'Show less'; > } > > .read-more-trigger { > cursor: pointer; > display: inline-block; > padding: 0 .5em; > color: #666; > font-size: .9em; > line-height: 2; > border: 1px solid #ddd; > border-radius: .25em; > } > ~~~ > Meine Frage ist nun, warum "verschwinden" die "lorem" Weiterlesen-Einträge, die Grafik aber nicht - im deaktivierten "Read-more" Modus? Daraus ergibt sich nämlich, das der "Read-more" Button nicht mehr aktivierbar ist weil die Grafik eben im Hintergrund liegt. Zur Verdeutlichung hab ich mal die opacity bei .read-more-target auf 0,2 gesetzt. > > Ich hoffe ich bin hier in diesem Forum, an dieser Stelle richtig. Falls nicht steinigt mich bitte nicht sondern seid nachsichtig mit mir und verbessert mich. Ich gelobe Besserung! > Hm. Kannst Du das online stellen? Ist schwierig nachzuvollziehen. Auf den ersten Blick ist: ~~~css opacity: 0,2; ~~~ ungültig. [Da muss als Dezimaltrenner ein Punkt hin](https://developer.mozilla.org/de/docs/Web/CSS/opacity). Validiere also zunächst das HTML und das CSS.

> ~~~html > <div> > <input type="checkbox" class="read-more-state" id="post-2" /> > > <ul style="padding-left:0em;" class="read-more-wrap"> > <p>lorem</p> > <p>lorem 2</p> > <p class="read-more-target">lorem 3</p> > <p class="read-more-target">lorem 4</p> > <p class="read-more-target">lorem 5</p> > <p class="read-more-target">lorem 6</p> > <p class="read-more-target"><img src="http://u7.tsv-heimbuchenthal.de/images/pictures/w7e1b0c162f210023dafebec4cc24861/w7e1b0c162f350028e3a611d63f9d632/w7e1b131603180018fb5dedcc123c3e0/ErgebnisVorlage2.jpg?w=545&h=50" style="border: 5px solid #eeeeee; border-radius:.25em;"/></p> > <p class="read-more-target">lorem 7</p> > </ul> > > <label for="post-2" class="read-more-trigger"></label> > </div> > ~~~ > ~~~css > .read-more-state { > display: none; > } > > .read-more-target { > opacity: 0,2; > max-height: 0; > font-size: 0; > transition: .25s ease; > } > > .read-more-state:checked ~ .read-more-wrap .read-more-target { > opacity: 0; > font-size: inherit; > max-height: 999em; > } > > .read-more-state ~ .read-more-trigger:before { > content: 'Show more'; > } > > .read-more-state:checked ~ .read-more-trigger:before { > content: 'Show less'; > } > > .read-more-trigger { > cursor: pointer; > display: inline-block; > padding: 0 .5em; > color: #666; > font-size: .9em; > line-height: 2; > border: 1px solid #ddd; > border-radius: .25em; > } > ~~~ > Meine Frage ist nun, warum "verschwinden" die "lorem" Weiterlesen-Einträge, die Grafik aber nicht - im deaktivierten "Read-more" Modus? Daraus ergibt sich nämlich, das der "Read-more" Button nicht mehr aktivierbar ist weil die Grafik eben im Hintergrund liegt. Zur Verdeutlichung hab ich mal die opacity bei .read-more-target auf 0,2 gesetzt. > > Ich hoffe ich bin hier in diesem Forum, an dieser Stelle richtig. Falls nicht steinigt mich bitte nicht sondern seid nachsichtig mit mir und verbessert mich. Ich gelobe Besserung! > Hm. Kannst Du das online stellen? Ist schwierig nachzuvollziehen. Auf den ersten Blick ist: ~~~ opacity: 0,2; ~~~ ungültig. [Da muss als Dezimaltrenner ein Punkt hin](https://developer.mozilla.org/de/docs/Web/CSS/opacity). Validiere also zunächst das HTML und das CSS.

> ~~~html > <div> > <input type="checkbox" class="read-more-state" id="post-2" /> > > <ul style="padding-left:0em;" class="read-more-wrap"> > <p>lorem</p> > <p>lorem 2</p> > <p class="read-more-target">lorem 3</p> > <p class="read-more-target">lorem 4</p> > <p class="read-more-target">lorem 5</p> > <p class="read-more-target">lorem 6</p> > <p class="read-more-target"><img src="http://u7.tsv-heimbuchenthal.de/images/pictures/w7e1b0c162f210023dafebec4cc24861/w7e1b0c162f350028e3a611d63f9d632/w7e1b131603180018fb5dedcc123c3e0/ErgebnisVorlage2.jpg?w=545&h=50" style="border: 5px solid #eeeeee; border-radius:.25em;"/></p> > <p class="read-more-target">lorem 7</p> > </ul> > > <label for="post-2" class="read-more-trigger"></label> > </div> > ~~~ > ~~~css > .read-more-state { > display: none; > } > > .read-more-target { > opacity: 0,2; > max-height: 0; > font-size: 0; > transition: .25s ease; > } > > .read-more-state:checked ~ .read-more-wrap .read-more-target { > opacity: 0; > font-size: inherit; > max-height: 999em; > } > > .read-more-state ~ .read-more-trigger:before { > content: 'Show more'; > } > > .read-more-state:checked ~ .read-more-trigger:before { > content: 'Show less'; > } > > .read-more-trigger { > cursor: pointer; > display: inline-block; > padding: 0 .5em; > color: #666; > font-size: .9em; > line-height: 2; > border: 1px solid #ddd; > border-radius: .25em; > } > ~~~ > Meine Frage ist nun, warum "verschwinden" die "lorem" Weiterlesen-Einträge, die Grafik aber nicht - im deaktivierten "Read-more" Modus? Daraus ergibt sich nämlich, das der "Read-more" Button nicht mehr aktivierbar ist weil die Grafik eben im Hintergrund liegt. Zur Verdeutlichung hab ich mal die opacity bei .read-more-target auf 0,2 gesetzt. > > Ich hoffe ich bin hier in diesem Forum, an dieser Stelle richtig. Falls nicht steinigt mich bitte nicht sondern seid nachsichtig mit mir und verbessert mich. Ich gelobe Besserung! > Hm. Kannst Du das online stellen? Ist schwierig nachzuvollziehen. Auf den ersten Blick ist: ~~~ opacity: 0,2; ~~~ ungültig. [Da muss als Dezimaltrenner ein Punkt hin](https://developer.mozilla.org/de/docs/Web/CSS/opacity).