html - When i hover my icon for make it bigger, my page moving

Question

When i put my cursor on my icon , my icon font size is growing up so div being little bigger and its make move page a little and its not looking cool. How can i make it without make my div bigger ? 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;
}

标签： htmlcssreactjsreact-nativesass

Answer 1

You can position the element with absolute. This property makes it so that your icon does not alter any other item in the DOM. Even if you move, transform or do anything to this element, the others will not move.

.ratingEase {
    transition: 0.2s;
    font-size: 50px;
    position: absolute;
}