How can I make text to appear from the sides just like an animation? I`ve tried setting it with absolute positions and it worked like I wanted, but I was hoping to find better ways to do it so I am here.
*{
box-sizing:border-box;
margin:0;
padding:0;
}
.container {
width:20rem;
height:20rem;
background-color:lightgrey;
display:flex;
justify-content:center;
align-items:center;
}
.hover-this{
display:block;
background-color:blue;
color:white;
padding:3rem;
}
.left-text{
position:absolute;
left:1rem;
overflow:hidden;
color:blue;
}
.right-text{
position:absolute;
left:18rem;
color:blue;
bottom:80%;
}
.hover-this:hover{
background-color:white;
color:blue;
transition:background-color 1s, color 1s;
}
.hover-this:hover .right-text{
left:12.5rem;
transition:left, 500ms ease-in-out;
color:blue;
overflow:hidden;
}
.hover-this:hover .left-text{
left:7rem;
transition:right, 500ms ease-in-out;
color:blue;
}<script src="" crossorigin="anonymous"></script>
<div class="container">
<div class="hover-this">
<div class="left-text"><i class="fas fa-chevron-left"></i></div>
hover me
<div class="right-text"><i class="fas fa-chevron-right"></i></div>
</div>
</div>I just wanna do the same thing without having to use position absolute if possible.
1 Answer
You can try this on hover
.hover-this:hover{
transform: translateX(7rem);
}
And if you want to make this smoothly, you can use it with the transition
.hover-this:hover{
transform: translateX(7rem);
transition: transform 0.2s ease 0s;
}
