title: Appearing and disappearing animation with pure CSS
body: <p>I have a checkbox and an image on an HTML page:</p>
  <p>I want the image to disappear when the checkbox is checked, and return back when it's unchecked. It can be easily done with the <code>opacity</code> property but this will only hide the image – and I need it to disappear (so that other elements can take the image's place for example).
  I tried to combine <code>opacity</code> with <code>display</code> properties:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>img {
      display: block;
      opacity: 1;
      transition: opacity 0.5s ease-in-out;
  }
  #checkbox:checked ~ div img {
      display: none;
      opacity: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;input type="checkbox" id="checkbox"&gt;
      &lt;div&gt;
          &lt;img src="https://via.placeholder.com/150" alt=""&gt;
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>but it wouldn't work (no transition).</p>
  <p>How can I solve this problem?</p>