起こったこと
ホバー時に文字を大きくする処理を以下のようにCSSで書いた。
<style> .hogehoge {} .hogehoge:hover { font-size: 130%; } </style> <div class="hogehoge"> 文字を大きく </div> <p> ここはそのまま </p>
しかし、対象となる要素が増加した文字サイズ分広がっていて、下にある要素も文字サイズが増えた分下がる。かくかくしていて見栄えが良くなかった。
対処した方法
transform: scale()
を使うことにした。transform-origin
の設定も色々と変えると大きくなる起点も変えられる。うまくいかないときはこれも変えてみること。
<style> .piyopiyo {} .piyopiyo:hover { transform: scale(1.3); transform-origin: left; } </style> <div class="piyopiyo"> 文字を大きく </div> <p> ここはそのまま </p>