I have a problem in formatting an anchor link using the transform scale attributes when hovering on it.

I have a link inside a div (that div is used to alight the link to the right), and i would like to enlarge when I hover on it. However, when i do it, it also increase the body size of the parent div, thus moving all my other elements on the page. Why that happens? As far as I know scale should not act on the size of the elements, least of all on its parent.

Can you tell me where I'm wrong. I'm quite new to html and css, so maybe i completely set up bad my code.

Thanks to anyone who can help me.

a#fonte1 {
    font-size: 1rem !important;
    font-weight: 300 !important;
    transition: transform 0.2s ease !important;
    display: inline-block !important;
  }

a#fonte1:hover {
    transform: scale(1.2) !important;
    cursor: pointer !important;
    color: rgb(13,89,253) !important;
    border: 1px solid rgb(13,89,253) !important;
    border-radius: 0.3rem !important;
  }

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<section class="showcase border-bottom">
    <div class="container-fluid p-0">
        <div class="row g-0">
            <div class="col-lg-6 order-lg-2">
                ...
                        </div>  
            <div class="col-lg-6 order-lg-1 ">
                <h2>[title 1]</h2>
                            <p class="mb-0" style = "text-align: justify">
                    ...
                            </p>
                            <div style="text-align:right;">
                    <a id="fonte1" href="#">
                        Link
                    </a>
                </div>
                    </div>
        </div>
                <div class="row g-0">
                    <div class="col-lg-6 ">
                            ...
                        </div>
                <div class="col-lg-6 ">
                            <h2>[title 2]</h2>
                            <p class="mb-0" style = "text-align: justify">
                                    ...
                            </p>
                        </div>
        </div>
    </div>
</section> 

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You are adding a border on hover which changes the size of the element. Add a transparent border on the base state and change its color on hover.

a#fonte1 {
  font-size: 1rem;
  font-weight: 300;
  transition: transform 0.2s ease;
  display: inline-block;
  border: 1px solid transparent;
}

a#fonte1:hover {
  transform: scale(1.2);
  cursor: pointer;
  color: rgb(13, 89, 253);
  border: 1px solid rgb(13, 89, 253);
  border-radius: 0.3rem;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<section class="showcase border-bottom">
  <div class="container-fluid p-0">
    <div class="row g-0">
      <div class="col-lg-6 order-lg-2">
        ...
      </div>
      <div class="col-lg-6 order-lg-1 ">
        <h2>[title 1]</h2>
        <p class="mb-0" style="text-align: justify">
          ...
        </p>
        <div style="text-align:right;">
          <a id="fonte1" href="#">
                        Link
                    </a>
        </div>
      </div>
    </div>
    <div class="row g-0">
      <div class="col-lg-6 ">
        ...
      </div>
      <div class="col-lg-6 ">
        <h2>[title 2]</h2>
        <p class="mb-0" style="text-align: justify">
          ...
        </p>
      </div>
    </div>
  </div>
</section>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>