Hover Slide Down

[alij2022]

Hi,

I have a <div> with two texts, where one is hidden. I want that, when I hover the main <div>, the hidden text appears as a slide down. Here is my code:

<div id="main">
<p>IF YOU HOVER IN THE BOX, ANOTHER TEXT WILL SLIDE DOWN</p>
<p id="hiddentext" style="display:none">Hey' I'm visible now!</p>
</div>

<style>
#main:hover>#hiddentext {
display:block!important;
}
</style>

Well, the text is displaying whe hover, but how to do a slide down effect with CSS?

 

[MeMate]

#main{position:relative;}
#hiddentext{position:absolute; top:-20px opacity:0; transition:top 0.5s, opacity:0.5s}
ähiddentext:hover{top:100%; opacity:1;}