htmlでホバー時に文字サイズを大きくする際、下の要素がずれるのをやめたかった

起こったこと

ホバー時に文字を大きくする処理を以下のようにCSSで書いた。

<style>
    .hogehoge {}

    .hogehoge:hover {
      font-size: 130%;
    }
</style>
<div class="hogehoge">
  文字を大きく
</div>
<p>
  ここはそのまま
</p>

しかし、対象となる要素が増加した文字サイズ分広がっていて、下にある要素も文字サイズが増えた分下がる。かくかくしていて見栄えが良くなかった。

対処した方法

transform: scale()を使うことにした。transform-originの設定も色々と変えると大きくなる起点も変えられる。うまくいかないときはこれも変えてみること。

developer.mozilla.org

<style>
    .piyopiyo {}

    .piyopiyo:hover {
      transform: scale(1.3);
      transform-origin: left;
    }
</style>
<div class="piyopiyo">
  文字を大きく
</div>
<p>
  ここはそのまま
</p>