Hover Slide Down


Joined
Dec 23, 2021
Messages
3
Reaction score
0
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:

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?
 
Ad

Advertisements

Joined
Mar 11, 2022
Messages
82
Reaction score
8
Code:
#main{position:relative;}
#hiddentext{position:absolute; top:-20px opacity:0; transition:top 0.5s, opacity:0.5s}
ähiddentext:hover{top:100%; opacity:1;}
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top