Whenever I hover over my icon, the font size increases causing the div to expand slightly and move the page. This doesn't look great. How can I prevent the div from resizing when hovering over the icon? Here's my code:
<div className="bg-gray-100 ratingWidth tomiddle p-6 rounded-lg text-center">
Aradığınız yanıtı bulabildiniz mi ?
<div className="mt-3 space-x-5 h-full "> //My icon Div
<span className="ti-thumb-up ratingEase "></span> //My icons
<span className="ti-thumb-down ratingEase"></span>
<br />
</div>
</div>
Css :
.ratingWidth {
width: 96%;
height: 100%;
}
.ratingEase {
transition: 0.2s;
font-size: 50px;
}
.ratingEase:hover {
transition: 0.2s;
transition-timing-function: ease;
font-size: 54px;
}