transform: scaleの基準位置がずれてしまいます。

Question

実現したいこと

・画像の上に文字を配置する
(○○pxのように数値での指定は避けたいです。)
(縦：1/2高さ、横：左から1/5の位置に「ねこって？」という文字)

・「ねこって？」の文字にカーソルを置いたとき、
"その場の位置で" 1.1倍のサイズにしてリンクテキストにした
い。

前提

練習で自作のウェブサイトを0から作成しています。
画像上に文字を配置したかったので、
absoluteの基準位置をtransform:translate(-50%,-50%)で設定し、位置を指定しました。
その影響か、ホバー時の文字拡大の基準位置がずれてしまい、
その場の位置で拡大できません。

html,cssは初心者でcalc関数もあっているか確信がもてません。

どうか解決策をご教示いただけないでしょうか。
よろしくおねがいいたします。

HTML

 <div class="about-cats">
    <img src="./cat01.jpg" alt="こねこの画像">
    <p class="title">ねこって？</p>
  </div>



CSS

.about-cats {
  width: 100%;
  height: auto;
  position: relative;
}

.about-cats img {
  width: 100%;
}

.about-cats .title {
  position: absolute;
  transform: translate(-50%,-50%);
  top: calc(100% / 2);
  left: calc(100% / 5);
  font-size: 25px;
  color: red;
  padding: 0;
  margin: 0;
  text-shadow: 2px 2px rgb(255, 193, 7);
  color: rgb(181, 124, 10);
}

.about-cats .title:hover{
  transform: scale(1.1);
}

Answer 1

.about-cats .title:hover{
  transform: translate(-50%,-50%) scale(1.1);
}

hover 時にも translate を指定してください。

Comments

[mikan]

無事解決いたしました。
とても勉強になりました。
ありがとうございます。

追記
試しに下記のとおり2行に分けて指定しましたが、
それではだめなのですね。機能しませんでした。

transform: scale(1.1);
transform: translate(-50%,-50%);

[arcxor]

同じプロパティを複数記述すると、後に書かれた有効な値を持つプロパティが採用されます。

試された記述では translate(-50%,-50%); が採用され、scale(1.1); の指定が上書きされてしまいます。

[mikan]

機能しなかった理由がやっと理解できました。
ありがとうございます！