CSS Transition div容器高度从100％到200％

Question

我已经阅读了其他一些问题，但我还没有找到一个可靠的例子，将div的自然高度（自动，100％）转换为更大的高度（比如说200％）当用户将鼠标悬停在它上面时。任何坚实的技术？

这是我的小提琴：http://jsfiddle.net/ESgna/3

.critic-quotes {
    -webkit-transition: max-height 0.3s ease-in-out;
    -moz-transition: max-height 0.3s ease-in-out;
    -o-transition: max-height 0.3s ease-in-out;
    -ms-transition: max-height 0.3s ease-in-out;
    transition: max-height 0.3s ease-in-out;
    max-height: 100%;

}

.critic-quotes:hover {
    max-height: 200%;
  }

Answer 1

<强> JSFIDDLE

<强>以前

.critic-quotes:hover {
    max-height: 200%;
  }

<强>更新

.critic-quotes {
    -webkit-transition: max-height 0.3s ease-in-out;
    -moz-transition: max-height 0.3s ease-in-out;
    -o-transition: max-height 0.3s ease-in-out;
    -ms-transition: max-height 0.3s ease-in-out;
    transition: max-height 0.3s ease-in-out;
    max-height: 100%;

}

.critic-quotes:hover{
  opacity: 1;
  -webkit-transform: scaleY(2);
          transform: scaleY(2);
}