Move div on hover ?how

1

Guys, this is small thing, i have ::after inside a div . When i hover over it it should travel from left end of its parents width to right end.
But when i say in transform: translatex(200%); it only travelling it own width or 2X not its parents entire width which is wider.
I can do it with hard coding but looking for an alternative
Thanks for reading.

2

You can set child position to absolute and change it’s position on hover from left: 0 to right: 0 :wink: It would be very unstable and hacky with translateX

UPDATE: To secure transition you have to change only one property: from left: 0 to left: calc(100% - 60px)

3

Thanks man,your calc. method works but, can we make it so that the
when we hover it goes to right but, when we take the mouse away it doesn’t come back.

our link:

Thanks for previous reply.

4

To do that you need to play animation on hover

.container::after {
  ...
  animation: glare 0.4s linear;
  animation-play-state: paused; 
}
.container:hover::after {
  animation-play-state: running;
}
@keyframes glare {
  from {
    left: 0;
  }
  to {
    left: calc(100% - 60px);
  }
}
5

@snigo Thank you very much for this answer.
i did it with your guidance.

1 Like
6

If you want GPU-accelerated animations* (which is generally what you want unless you absolutely can’t avoid), you can still use translateX, but you’ll need another wrapper element for the glare. Then you make that wrapper element 100% of the width of the container, and the actual glare in an ::after pseudo-element defined on it. You then animate the wrapper element, not the glare itself. Example:

* so any transform function (2D or 3D), any filter function, opacity, color (I think that’s the lot)