title: Css Grow on Hover is moving text vertically across the div
body: <p>I have a css transition so that when someone hovers over an image, the h2 will grow. It does kind of work, but the in addition to growing the h2 is also moving across the div. This has never happened to me before and I can't figure out why. You can see it's behavior here, if you scroll to the bottom of the page and hover over Our Story and Our Team: <a href="https://katherinemade.com/staging/mission-vision-values/" rel="nofollow noreferrer">https://katherinemade.com/staging/mission-vision-values/</a></p>
  <p>Here is my html:</p>
  <pre><code>&lt;div class=&quot;img-relative-position&quot;&gt;
    &lt;h2 class=&quot;over-image-text&quot;&gt;Our Story&lt;/h2&gt;
    &lt;a href=&quot;#&quot;&gt; &lt;img /&gt; &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And my css:</p>
  <pre><code>.img-relative-position {
      position: relative;
  }
  .over-image-text {
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  .img-relative-position h2 {
      transition: all .2s ease-in-out;
  }
  .img-relative-position:hover h2 {
      transform: scale(1.5);
  }
  </code></pre>
  <p>Does anyone know what could be causing my h2 to move vertically across the div, and how I can keep it center but still grow?</p>