Transition from vh to 100% on hover not working

Question

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

No, this is not possible with CSS unless the image has a stated height. Essentially, you are trying to transition to `auto` which is not possible without Js. — Paulie_D, Jun 25 '16 at 05:27

Huy Chau · Accepted Answer · 2016-06-25T05:20:42.707

2

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

edited Jun 25 '16 at 05:20

answered Jun 25 '16 at 05:01

Huy Chau

2,178
19
26

Huh? The URL does work. And the transition definitely doesn't work... – Yodacheese Jun 25 '16 at 05:04
See my updated answer :) – Huy Chau Jun 25 '16 at 05:21
Yup that works. Although its not perfect for every scenario, Its good for me. I don't need it to go beyond the 800px width. Thanks! – Yodacheese Jun 25 '16 at 05:41

Transition from vh to 100% on hover not working

1 Answers1