Grafik zerstört meinen "Read-more" Code

[Regina Schaukrug]

<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>

.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.

Validiere also zunächst das HTML und das CSS.