CSS transition on :hover to display div

Question

Since I am a beginner, I am really struggling with this.

Can you tell me how I can transition the position of the .box when hovering?

I could only display it, but I couldn't transition the position from bottom to top which is what I want to do.

 .more { position: relative; height: 100px; } .box { display: none; position: absolute; background: white; border-radius: 4px; height: 43px; width: 169px; top: 50px; transition: top 5s; } .more:hover .box { top: 100px; display: block; } 

 <div class="col-sm-1 more"> <a href="#" class="paragraphs " id="xx">More</a> <div class="box"> <span>Pages</span> </div> </div> 

Answer 1

Try visibility instead of display . Visibility works a bit better with transitions.

 .more { position: relative; height: 100px; } .box { position: absolute; background: white; border-radius: 4px; height: 43px; width: 169px; top: 50px; transition: top 5s ease; visibility: hidden; } .more:hover .box { top: 100px; display: block; opacity: 1; visibility: visible; } 

 <div class="col-sm-1 more"> <a href="#" class="paragraphs " id="xx">More</a> <div class="box"> <span>Pages</span> </div> </div> 

Answer 2

Transition works by interpolating between the old value and then new value. The issue that you're seeing here is technically the old value was never applied in the first place.

Setting .box to display: none was basically saying, "don't render this at all," and transition can't transition between something that doens't exist and another value. Using visibility instead of display fixes the issue since visibility: hidden only hides the element, not removing it completely.

 .more { position: relative; height: 100px; } .box { visibility: hidden; position: absolute; background: white; border-radius: 4px; height: 43px; width: 169px; top: 50px; transition: top 5s; } .more:hover .box { top: 100px; visibility: visible; } 

 <div class="col-sm-1 more"> <a href="#" class="paragraphs " id="xx">More</a> <div class="box"> <span>Pages</span> </div> </div> 

If you want the transition to work in reverse, then you can add another transition delaying the visibility.

Answer 3

Try this : you can easily change the margin in the box class if you want and the speed in the transition :)

 .box {
  position:absolute;
  top:0;
  margin-top:400px;
}
.more:hover .box {
    margin-top:0;
  -moz-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
}