css - hover simple animation

<div>
  <p>text</p>
</div>
<style>
div {background: rgba(34,34,34,.8); width: 200px; height: 200px;
margin: 0 auto; display: flex; align-items: center; justify-content: center; position: relative; border-radius: 1rem;}
div p {color: #fff; z-index:1;}
div:hover p {color: #333;}

div::after {content: ''; display: block; width: 100%; height: 0%; position: absolute; bottom: 0; background: rgba(150,245,245); transition: .5s all ease-in-out;}
div:hover::after {height: 100%; border-radius: 1rem;}
</style>