How can I make this animation ?
Hello,
I have a div with a background-color and a text.
Now I want if you hover over the div that a darker color appears from the bottom to the top and the text moves also from the bottom to about the middle of the div.
Is this possible and if so, how can I make this work ?
2 Replies
A transition should be enough to achieve this.
For the text, make sure that it has position relative or absolute and use translate to move it up on hover.
For the background, I would probably use a pseudo element that is taller than the button but clipped to the bounds of the button so it can be seen below. Again, on hover, use translate to move it upwards accordingly.
As always, there are of course other ways to achieve the same effect.
Thanks for the idea