CODEWITHSUNDEEP
htmlcss
Vishu238
Vishu238

Reputation: 673

Text gets Blured during transition

On hovering Text gets blured(on Chrome). I know this is because of SCALING of text..
So my question is is there any way to do the same task in which text doesn't get blured.
Here is what I have tried

span a {
  font-size: 24px;
}
span:hover a {
  color: #ba4a49;
  -webkit-transform: scale(10);
  transition: all 2s linear;
}
<span>
    <a href="#">Hello this looks blured during transition</a>
</span>

update
Plese Note that I have to scale the text from center. If I change the font Size 10 Times then scaling is done from left(not center)

span:hover a {
  color: #ba4a49;
  font-size:250px;
  transition: all 2s linear;
}

See Updated Jsfiddle Link

Upvotes: 2

Views: 159

Answers (1)

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

To prevent blurring, you can transition on font-size instead of on transform: scale. For what it's worth, I didn't experience any blurring problems with your example on my own Chrome browser.

Live Demo:

span a{
    font-size: 24px;
}
span:hover a{
    color:#ba4a49 ;
    font-size: 240px;
    transition: all 2s linear;
}
<span><a href="#">Hello this looks blured during transition</a></span>

Upvotes: 3

Related Questions