生成AI+スマホで作成「WordPress(ブログ)で使えるJavaScript」 画像のズームイン

<div class="zoom-container">
  <img src="ここにズームする画像のURL" class="auto-zoom-in" alt="ズーム画像">

document.querySelectorAll('.auto-zoom-in').forEach(img => {
  if (img.complete) {
    img.classList.add('is-loaded');
  } else {
    img.addEventListener('load', () => {
      img.classList.add('is-loaded');
    });
  }
});

/* 親要素：はみ出し防止 */
.zoom-container {
  overflow: hidden;
  width: 100%; /* ブログの幅に合わせる */
}

.auto-zoom-in {
  width: 100%;
  display: block;
  opacity: 0;
  /* 最初は等倍(1.0) */
  transform: scale(1.0);
  /* ズームする時間 秒(s) */
  transition: transform 9s ease-out, opacity 1s ease-out;
  /* ズームインのポイントを数値（％）で細かく指定可（例：左から50%、上から64%の位置） */
   transform-origin: 50% 64%; 
}

/* 読み込み完了後に8倍へ拡大 */
.is-loaded {
  opacity: 1;
  transform: scale(8); 
}