title: Open a list when clicked on a image with rotate image
body: <p>Have the following structure: Need to open the list upwards on top of the image when clicked on the image and <strong>rotate the image to 180 deg</strong> with some linear transition effect, </p>
  
  <pre><code>&lt;div class="wrapper"&gt;
       &lt;span&gt;&lt;Image&gt;&lt;/span&gt;
      &lt;ul class="list"&gt;
      &lt;li class=""&gt;
       &lt;a href=""&gt;item 1&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=""&gt;
       &lt;a href=""&gt;item 2&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=""&gt;
       &lt;a href=""&gt;item 3&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=""&gt;
       &lt;a href=""&gt;item 4&lt;/a&gt;
      &lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>tried with sibling max-height, but not getting the effect I wanted</p>
  
  <pre><code>list{
   max-height: 0;
   overflow:hidden;
  }
  a:focus+list{
   max-height:10rem;
  }
  </code></pre>