Grafik zerstört meinen "Read-more" Code

[MJCool81]

Guten Morgen liebe Community,

bitte helft mir zu verstehen ob ich einen falschen Lösungsansatz verfolge, es also über meinen eingeschlagenen Weg nicht programmierbar ist oder ob ich lediglich nicht über genügend HTML / CSS Kenntnisse verfüge um meinen "Read-more" Code ordentlich umzusetzen.

ich habe mir folgendes bereits zusammengebastelt:

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