各位大大，小弟在寫REACT套用自己寫的CSS中遇到了一些小疑惑，查了很久多沒有特別講到我遇到的問題，小弟的主頁大致是這樣

<article className='Container'>
    <img .../>
    <div className='text'>
        <h1> Text </h1>
    </div>
</article>

CSS:

.Container {
  padding: 1rem 1rem;
  position: relative;
  margin: auto;
  overflow: hidden;
}

.Container img {
  width: 200px;
  border-radius: 1.3rem 0rem 0rem 0rem;
  transition: transform 0.2s ease-out;
 }

.Container:hover img,
.Container:focus img {
  transform: scale(1.16);
}

.text h1 {
  padding-top: 0.25rem;
  font-size: 1.5rem;
  margin-top: 0.8rem;
  transition: transform 0.4s ease-out;
}

.text:hover h1,
.text:focus h1 {
  transform: translateX(22%);
}

問題如下:

1. 要如何在img放大的情況下，不須特別放到text上，使h1也會跟著右移
   (簡單來說就是不管我滑鼠怎麼放到Container上，圖片會自己放大，且字也跟著一起移動(不互相干擾))
   => 因為未來有可能也會想放入其他element進行連動~
   結果我試了半天，結果要不是一邊放大一邊右移，要馬字都不會動QAQ

2. 另外在圖片放大的情況下，當他縮小回原大小時，放大時的圖片位置下方，會有一些殘影痕跡，想問有沒有方式可以不讓殘影顯現

以上為小弟想請教的問題，若有更好的寫法，也希望各位大大願意讓小弟觀摩觀摩!!
謝謝~~麻煩了

P.S 網路上找半天，就只有激鬥峽谷的英雄頁很像我要的結果QQ
https://wildrift.leagueoflegends.com/zh-tw/champions/