0

I have a container, and two texts inside where one is hidden, that is display:none. I want that when I hover the container, the hidden text appears. Everything is working well, except that I want a slide down effect the hidden text appears. Here what I did:

    <div id="maincontainer">
    <p>Hover on the container</p>
    <p id="hiddentext">Hey, I'm visible!</p>
    </div>
    
    <style>
    #hiddentext {
        text-align:center;
        display:none; 
        transform: translateY(0);
        transition: all .3s ease-out;
        color:#fff;
        font-family:'lato',sans-serif;
    }
    
    #maincontainer:hover>#hiddentext {
     display:block;
     transform: translateY(10%);
    }
    </style>

The hidden text is appearing, but not with a slide down effect. I have seen other tutorials where they do this with opacity and visibility, however, it leaves the extra space which I do not want. So, I am using the "display" property here. Can someone help?

user1780468
  • 117
  • 3
  • 8
  • This question gets asked at least once a day -- you can't transition something if you're toggling the `display` property. There's plenty of discussion on the subject here including potential workarounds :) https://stackoverflow.com/questions/3331353/transitions-on-the-css-display-property – omid May 30 '22 at 19:19
  • I can't see that you could get much of a slide down effect anyway, translateY(10%) only moves it by 10% of its height (not the window or containing element height for example). Could you describe the effect that you want in more detail? Is it to slide down the page by a perceptible amount while fully visible or is it to fade in as it slides down? And how much is it to slide down? – A Haworth May 30 '22 at 19:42
  • Element 'hidden' `{ opacity: 0; transition: opacity 300ms ease-in-out }` and on `:hover { opacity: 1; transition: opacity 300ms ease-in-out }`. Two transitions to smoothly show *and* hide again. – Rene van der Lende May 30 '22 at 23:32

0 Answers0