Hidden content with checkbox hack not displaying properly

I've been working on a "Show More" tool to shorten content on a page and came across a weird issue with it.

This code uses the CSS Checkbox "hack" to toggle between displaying and hiding content. The code below shows it in action.

.read-more {
  opacity: 0;
  max-height: 0;
  font-size: 0;
}
.thechecker {
  display: none;
}
.trigger {
  cursor: pointer;
  display: inline-block;
}
.thechecker ~ .trigger:before {
  content: 'Show more';
}
.thechecker:checked ~ .trigger:before {
  content: 'Show less';
}
.thechecker:checked ~ .read-more-wrap .read-more {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

<div class="col-sm-4">
  <input type="checkbox" class="thechecker" id="post-1" />
  <div class="read-more-wrap">
    <h3>I broke something.</h3>

    <p>This is not hidden.</p>
    <div class="read-more">
      <p>This is hidden.</p>
      <!-- THIS IMAGE IS CAUSING THE PROBLEM
       HOW DO I MAKE THIS WORK TO DISPLAY THE IMAGE ALONE? -->
      <img src="http://ift.tt/1TArdmh" />
    </div>
  </div>
  <label for="post-1" class="trigger"></label>
</div>

When there's no image inserted in this code, the paragraph will display perfectly with no issues. Whenever I include an image, however, no matter how long the content is, the "Show More" text will be effectively disabled. Clicking and dragging will result in dragging the image.

How can I make this so that I can display just the image when clicking the label?