Yodacheese Yodacheese - 5 months ago 30
CSS Question

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:

<div class="image-container">
<img class="image-item" src="http://i.imgur.com/GIWdCVA.jpg">
</div>


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

Comments