モダンCSSで作る、画像ホバー拡大エフェクトの最適解。transform scale() が主流の理由

<div class="grid">
  <!-- 1枚目のカード -->
  <div class="items">
    <p class="img"><img src="image01.jpg" alt="画像の説明"></p>
    <h3 class="ttl">タイトル</h3>
    <p class="txt">テキスト...</p>
  </div>
  <!-- (以下、同様にカードを並べる) -->
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 一昨日のTips：repeat関数活用 */
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

/* ★画像の外側の枠（アスペクト比固定） */
.grid p.img {
  aspect-ratio: 16 / 9; /* 昨日の復習：1行で比率固定 */
  overflow: hidden; /* ★重要：拡大した画像がはみ出ないようにする */
}

/* ★画像自体の設定 */
.grid p.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* ★動きを滑らかにする設定 */
  transition: transform 0.5s ease; /* ★0.5秒かけて、心地よく動かす */
}

/* ★【追加】ホバー時の動き */
/* 親要素（.items）がホバーされた時、中にある画像（img）を拡大する */
.items:hover p.img img {
  transform: scale(1.1); /* ★1.1倍に拡大（主流の手法） */
}

.items:hover p.img img {
  transform: scale(1.2); /* 1.2倍に拡大（より強調したい時） */
}

.items:hover p.img img {
  transform: scale(1.05); /* 1.05倍に拡大（控えめに動かしたい時） */
}

.grid p.img img {
  /* （中略） */
  transition: transform 0.3s ease; /* 0.3秒（速く、キビキビした動き） */
}

.grid p.img img {
  /* （中略） */
  transition: transform 1s ease; /* 1秒（遅く、ゆったりした動き） */
}

/* アニメーションを好まない設定の人には、動きを無効化（おまけセクション） */
@media (prefers-reduced-motion: reduce) {
  .grid p.img img {
    transition: none; /* 動きをオフ */
  }
  .items:hover p.img img {
    transform: none; /* 拡大もオフ */
  }
}