Transition for element height between hover state-CodePudding

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  style="">
                
                
                
                <div  style="margin-left: 0px;">
                    <div ><div >"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 >Antonio Compbell</span>
                    <p ><span >Student</span><span >,</span> <span >Yoga Studio</span></p>
                </div>
            </div>

CodePudding user response：

Two things to fix:

Your transition is happening on max-height, not height.
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  style="">



  <div  style="margin-left: 0px;">
    <div >
      <div >"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 >Antonio Compbell</span>
    <p ><span >Student</span><span >,</span> <span >Yoga Studio</span></p>
  </div>
</div>