Font size is scaled when scale is applied on hover
im using Tailwind CSS for styling.
text is hidden by default and on hover opacity is set to 100 to reveal the text. The issue is scaling factor is also scaling the text. Anyone knows how to fix it/
https://codepen.io/avinash-tallapaneni/pen/abQmQYZ?editors=1010
3 Replies
CodeSandbox
CodeSandbox: Code, Review and Deploy in Record Time
CodeSandbox is a cloud development platform that empowers developers to code, collaborate and ship projects of any size from any device in record time.
When you apply scale it scales the element along with all its children elements.
You will probably have to take the text element out of the one that you are scaleing so that it isn’t affected.
You could try to do a negative scale on the text element to try to cancel the effect of the parent but I suspect that it will be hard to do it so there isn’t a slight change.
Yeah i did that. its working but buggy at times. Not going to bother too much