I've been experimenting with creating an interactive function that expands a red box and reveals additional text when the cursor hovers over it, using a vertical linear transition. Unfortunately, I'm facing difficulty in implementing this feature.
I'm unable to find relevant resources to address my issue, so I've turned to seeking assistance here.
Below is the code snippet for the div element:
.box {
transform: translatey(-20px);
background: #9b59b6;
height: 200px;
width: 500px;
line-height: 70px;
text-align: center;
color: white;
font-size: 20px;
}
.key {
height: 50px;
width: 600px;
background: red;
transition: width 2s, height 2s;
}
.key:hover {
height: 500px;
}<div class="box key">
<h1 ID="super">Trying to put it here</h1>
</div>