title: Transition from vh to 100% on hover not working
body: <p>Is this possible at all without javascript?</p>
  
  <p>Here is my example: <a href="http://codepen.io/tknz/pen/Nrdaew" rel="nofollow">http://codepen.io/tknz/pen/Nrdaew</a></p>
  
  <p>I'm trying to make the image go to its auto height on hover.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="image-container"&gt;
      &lt;img class="image-item" src="http://i.imgur.com/GIWdCVA.jpg"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.image-container {
    margin: 0 auto;
    max-width: 800px;
  }
  .image-container .image-item {
    width: 100%;
    max-height: 200px;
    height: 20vw;
    object-fit: cover;
    transition: 0.5s ease-in all;
  }
  .image-container .image-item:hover {
    max-height: none;
    height: 100%;
    transition: 0.5s ease-out all;
  }
  </code></pre>