css - Transition from vh to 100% on hover not working

Is this possible at all without javascript?

Here is my example: http://codepen.io/tknz/pen/Nrdaew

I'm trying to make the image go to its auto height on hover.

HTML:

CSS:

.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;
}

Answer

Update your CSS code to:

.image-container {
  margin: 0 auto;
  max-width: 800px;
}

.image-container .image-item {

  width: 100%;
  max-height: 200px;
  object-fit: cover;
  transition: all 2s ease-out; // I use 2s to easy see animation
}

.image-container .image-item:hover {
  max-height: 999px;
}

This code max-height: 999px;, 999px value is hard code for max-height of your images (because use without JS).

It works fine: Here