Issue
I want the font size to decrease with the transition when the mouse is hovered over. However, it flickers when hovering over the mouse. I want to get rid of flicker.
.big-box {
display: flex;
}
.big-box span {
font-size: 100px;
transition-duration: 1s;
white-space: pre;
}
.big-box span:hover {
font-size: 50px;
}
<div class="big-box">
<span>I</span>
<span>T</span>
<span> </span>
<span>I</span>
<span>S</span>
<span> </span>
<span>T</span>
<span>E</span>
<span>X</span>
<span>T</span>
</div>
Solution
A better way is to use scale
instead of font-size
, like so:
.big-box {
display: flex;
}
.big-box span {
font-size: 100px;
transition-duration: 1s;
white-space: pre;
}
.big-box span:hover {
transform: scale(0.6);
}
<div class="big-box">
<span>I</span>
<span>T</span>
<span> </span>
<span>I</span>
<span>S</span>
<span> </span>
<span>T</span>
<span>E</span>
<span>X</span>
<span>T</span>
</div>
Answered By - yousoumar
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.