title: Is it possible to show a <div> by clicking an image in CSS?
body: <p>I have a HTML code like this:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  img.settings {
      hight: 100px;
      width: 20px;
  }
  
  div.settings {
      position: fixed;
      left: 0px;
      top: 0px;
      right: 100%;
      bottom: 0px;
      background-color: #000000;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="head"&gt;
      &lt;img class="settings" src="settings.png" /&gt;
  &lt;/div&gt;
  &lt;div class="settings"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I want the <code>div#settings</code> property  <code>right: 100%;</code> to be changed to <code>right: 50%;</code> if I click on the image. In other word I want the <code>&lt;div&gt;</code> to be shown/hidden by clicking the image. Is it possible by (only) css?</p>