HTML card CSS transition

Question

I created a card using HTML.The text class div only comes out when text class div is hovered.How can I change the HTML and CSS so that text div comes out when parent div is hovered.

.bg {
  background-color: white;
  width: 200px;
  height: 300px;
  border: solid red 2px;
  overflow: hidden;
}

.text {
  background-color: gray;
  position: relative;
  top: 180px;
  transition: top 0.5s;
}

.text:hover {
  top: 132px
}

<div class="bg">
  <div class="text">
    <h3>Test text</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis voluptas pariatur qui aut animi molestiae quia veritatis culpa excepturi. Nesciunt optio ipsa molest</p>
  </div>
</div>

Answer 1

You can add sibling div with text class div and add parent div for both divs and write transition for parent div as follows

<style>
        .bg{
            background-color: white;
            width: 200px;
            height: 300px;
            border: solid red 2px;
            overflow: hidden;

        }
        .text{
            background-color: gray;
            position: relative;
        }

        .inner{
            height: 200px;
        }
        .outer{
            position: relative;
            top: 2px;
            transition: top 0.5s;
        }
        .outer:hover{
            top: -65px;
        }
    </style>



<div class="bg">
        <div class="outer">
            <div class="inner"></div>
            <div class="text">
                <h3>Test text</h3>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis voluptas pariatur qui aut animi molestiae quia veritatis culpa excepturi. Nesciunt optio ipsa molest</p>
            </div>
        </div>
    </div>