Text comes from the sides when hover

user_16559491 0
Viewed 192

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="https://kit.fontawesome.com/9c5c8ca521.js" 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.

hover absolute css html
1 Answers

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;
}
user_146424150
Related