Transition for element height between hover state

Issue

I cant seem to make my transition work for my element. I the box to animate to a larger and/or smaller height between hover states. What am I doing wrong?

body{
  background-color: #000;
}

.martin-testimonials {
  background-color: #fff;
  border-radius: 6px 6px 6px 6px;
  width:13%;
  padding: 40px;
  font-family: Open Sans,Arial,sans-serif;
  font-size: 15px;
  line-height: 27px;
}

.martin-testimonials .et_pb_testimonial_content {
    max-height: 108px;
    overflow: hidden;
    margin-bottom: 10px;
    -webkit-transition: height 0.9s;
    -moz-transition: height 0.9s;
    transition: height 0.9s;
}

.martin-testimonials:hover .et_pb_testimonial_content {
    max-height: none;
}

<div class="et_pb_module et_pb_testimonial et_pb_testimonial_0 martin-testimonials clearfix et_pb_text_align_left et_pb_bg_layout_light et_pb_icon_off et_pb_testimonial_no_image et_had_animation" style="">
                
                
                
                <div class="et_pb_testimonial_description" style="margin-left: 0px;">
                    <div class="et_pb_testimonial_description_inner"><div class="et_pb_testimonial_content">"Nunc consequat justo eget enim finibus porta. Suspendisse orci nunc, rutrum quis nunc sed, feugiat hendrerit massa. In cursus ornare sollicitudin. Nunc consequat justo eget enim finibus porta. Suspendisse orci nunc, rutrum quis nunc sed, feugiat hendrerit massa. In cursus ornare sollicitudin."</div></div>
                    <span class="et_pb_testimonial_author">Antonio Compbell</span>
                    <p class="et_pb_testimonial_meta"><span class="et_pb_testimonial_position">Student</span><span class="et_pb_testimonial_separator">,</span> <span class="et_pb_testimonial_company">Yoga Studio</span></p>
                </div>
            </div>

Solution

Two things to fix:

1. Your transition is happening on max-height, not height.
2. Hover max-height should be a number, not none.

See the fixed snippet below. The only changes are the two items mentioned above.

body {
  background-color: #000;
}

.martin-testimonials {
  background-color: #fff;
  border-radius: 6px 6px 6px 6px;
  width: 13%;
  padding: 40px;
  font-family: Open Sans, Arial, sans-serif;
  font-size: 15px;
  line-height: 27px;
}

.martin-testimonials .et_pb_testimonial_content {
  max-height: 108px;
  overflow: hidden;
  margin-bottom: 10px;
  -webkit-transition: max-height 0.9s;
  -moz-transition: max-height 0.9s;
  transition: max-height 0.9s;
}

.martin-testimonials:hover .et_pb_testimonial_content {
  max-height: 300px;
}

<div class="et_pb_module et_pb_testimonial et_pb_testimonial_0 martin-testimonials clearfix et_pb_text_align_left et_pb_bg_layout_light et_pb_icon_off et_pb_testimonial_no_image et_had_animation" style="">



  <div class="et_pb_testimonial_description" style="margin-left: 0px;">
    <div class="et_pb_testimonial_description_inner">
      <div class="et_pb_testimonial_content">"Nunc consequat justo eget enim finibus porta. Suspendisse orci nunc, rutrum quis nunc sed, feugiat hendrerit massa. In cursus ornare sollicitudin. Nunc consequat justo eget enim finibus porta. Suspendisse orci nunc, rutrum quis nunc sed, feugiat
        hendrerit massa. In cursus ornare sollicitudin."</div>
    </div>
    <span class="et_pb_testimonial_author">Antonio Compbell</span>
    <p class="et_pb_testimonial_meta"><span class="et_pb_testimonial_position">Student</span><span class="et_pb_testimonial_separator">,</span> <span class="et_pb_testimonial_company">Yoga Studio</span></p>
  </div>
</div>

Answered By - Bumhan Yu