I have some elements that I want to show some additional information when they are hovered on. I have tried positioning my content out of the bottom of the box and then setting it to the bottom on hover, but depending on the amount of content, it sometimes still is visible.
In the example below, I have a red box, which I want the yellow box to animate up from the bottom of. Now I could use a crazy value like bottom: -9999px but this will then cause issues with the speed of my animation to slide the content up.
.item {
position: relative;
overflow: hidden;
background: red;
}
.item:hover .item__box {
bottom: 0;
}
.item__box {
position: absolute;
bottom: -100%;
background: yellow;
transition: all 300ms;
}<div class="item">
<br /><br /><br />
<p>lorem ipusm</p>
<br /><br /><br />
<div class="item__box">
<p>lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem </p>
<p>lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem </p>
<p>lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem </p>
<p>lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem </p>
<p>lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem </p>
</div>
</div>How can I make sure that the content is always just outside of the bottom of the box and then slides up nicely on hover?
Edit: Sorry, to make it clear, on hover I want the yellow content to be from the bottom of the red box, so there is a gap at the top where red can still be seen.