My current issue involves a button animation I am attempting to create. I envision a description box smoothly sliding out from behind a button whenever it is hovered over. However, my current implementation lacks the desired transition effect and simply jumps to its position abruptly. The code I am currently using is outlined below:
.button {
position: absolute;
display: flex;
padding:7px;
margin: 20px;
background-color: red;
}
.button > .popout {
display: none;
position: absolute;
padding: 2px;
background-color: blue;
color: white;
transition: 1s;
}
.button:hover > .popout {
display: block;
transform: translateX(20px);
}<div class="button">
<div class="icon">
O
</div>
<div class="popout">
email
</div>
</div>My ultimate goal is for the text "email" to elegantly glide out from beneath the background of the 'O' without any blue background or text appearing to the left of the 'O'. If my explanation or details are lacking, I apologize as I am relatively new to Stack Overflow and am just re-entering the world of HTML and CSS after a hiatus.