My transition for a <div>'s height is not taking place in my pen on codepen.io

So, I've got my own pen on codepen.io using a transition to change the height, and I don't know what's happening. CAN SOMEBODY HELP ME Please? I've got a single clue why but for some reason 1 of them is working?? I'm SUPER confused, this is not like a normal web-developing time to me.. sort of I've tried my best to think of why it might work myself but I've managed to get 0 luck D-:

So I tried this code:
HTML:

<div class="card">
  <div class="text">
    <h3>A Title</h3>
    <p>A Description for the story</p>
  </div>
</div>

CSS:

html, body {
  margin: 0;
  font-family: "Rubik", sans-serif;
  width: 100%;
  height: 100%;
  background: hsl(0, 0%, 10%);
  overflow: hidden;
}

.card {
  position: relative;
  background-image: url("/images/MyImage.png");
  background-size: cover;
  width: calc(66vw - 4rem);
  height: 50vh;
  padding: 20px;
  border-radius: 1rem;
  margin: 2rem;
  overflow: hidden;
}

.text {
  background: black;
  box-shadow: 0 0 2rem 5rem black;
  position: absolute;
  left: 0;
  bottom: 0;
  height: auto;
  width: inherit;
  transition-timing-function: ease;
  transition-duration: .5s;
}

.card:hover .text {
  height: 3rem;
}

.text h3 {
  margin: 0;
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  color: white;
  transition-timing-function: ease;
  transition-duration: .5s;
  cursor: default;
}

.card:hover h3 {
  position: absolute;
  bottom: 50vh;
}

.text p {
  position: absolute;
  display: none;
  bottom: 1rem;
  left: 1rem;
  color: white;
  margin: 0;
  transition-timing-function: ease;
  transition-duration: .5s;
}

.card:hover .text p {
  display: block;
}

h3::selection, p::selection {
  background: transparent;
}

can anybody tell me why the paragraph and the text just won't come up with a transition, I gave you everything in case anything isn't supposed to be like that. and by the way the image is a tropical beach with a non-used name by me, I just wanted you to know that there's ACTUALLY an image there just incase it has anything to do with it's children's transitions.

To make transitions you need a starting point and an ending point. However, not all properties "create" a smooth transition, for example from display: none; to display: block; no transition will be created (same from visibility: hidden to visible).

For this reason, if you want to create smooth transitions you have to use properties that allow you to do this. In this case for the p you have to use the opacity, while for the div you can't make a smooth transition from auto to 3rem, so you will be forced to set a height other than auto.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

html, body {
margin: 0;
font-family: "Rubik", sans-serif;
width: 100%;
height: 100%;
background: hsl(0, 0%, 10%);
overflow: hidden;
}
.card {
position: relative;
background-image: url("/images/MyImage.png");
background-size: cover;
width: calc(66vw - 4rem);
height: 50vh;
padding: 20px;
border-radius: 1rem;
margin: 2rem;
overflow: hidden;
}
.text {
background: black;
box-shadow: 0 0 2rem 5rem black;
position: absolute;
left: 0;
bottom: 0;
height: .5rem;
width: inherit;
transition-timing-function: ease;
transition-duration: .5s;
}
.card:hover .text {
height: 3rem;
}
.text h3 {
margin: 0;
position: absolute;
bottom: 1rem;
left: 1rem;
color: white;
transition-timing-function: ease;
transition-duration: .5s;
cursor: default;
}
.card:hover h3 {
position: absolute;
bottom: 50vh;
}
.text p {
position: absolute;
opacity: 0;
visibility: hidden;
bottom: 1rem;
left: 1rem;
color: white;
margin: 0;
transition-timing-function: ease;
transition-duration: .5s;
}
.card:hover .text p {
visibility: visible;
opacity: 1;
}
h3::selection, p::selection {
background: transparent;
}

<!-- language: lang-html -->

<div class="card">
  <div class="text">
    <h3>A Title</h3>
    <p>A Description for the story</p>
  </div>
</div>

<!-- end snippet -->