CSS transform transition not working as expected

Question

I've done some research and couldn't seem to fix it with other people's solutions. I'm trying animate the dropdown description box when hovering the .cols container.

I have the following codes:

    .cols-wrapper .cols .desc {
        min-height: 150px !important;
        display: none;
        position: absolute;
        background-color: #fff;
        width: 285px;
        padding: 10px 25px 25px;
        box-shadow: 0 10px 20px -10px rgba(0,0,0,0.2);
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        z-index: 99;
        opacity: 0;
        transition: 0.3s ease all;
        transform: translateY(-30px);
    }
    
    .cols-wrapper .cols:hover .desc {
        display: block;
        opacity: 1;
        transform: translateY(0px);
    }

<div class="cols-wrapper">
  <div class="cols col1">
    <img src="image.jpg">
    <h4>Title</h4>
    <div class="desc">
      <p>Description goes here</p>
      <a href="#" class="cta">Submit</a>
  </div>
</div>

Could anyone please give it a crack?

Thanks

Answer 1

Remove the display parameter from both:

.cols-wrapper .cols .desc {
        min-height: 150px !important;
        position: absolute;
        background-color: #fff;
        width: 285px;
        padding: 10px 25px 25px;
        box-shadow: 0 10px 20px -10px rgba(0,0,0,0.2);
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        z-index: 99;
        opacity: 0;
        transition: 0.3s ease all;
        transform: translateY(-30px);
    }
    
    .cols-wrapper .cols:hover .desc {
        opacity: 1;
        transform: translateY(0px);
    }

<div class="cols-wrapper">
  <div class="cols col1">
    <img src="image.jpg">
    <h4>Title</h4>
    <div class="desc">
      <p>Description goes here</p>
      <a href="#" class="cta">Submit</a>
  </div>
</div>