title: Background image zoom on hover without change text size
body: <p>I want to zoom background image on a hover but without change text size. How can I make this?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* { margin: 0; padding: 0; }
  body {
  }
  .article-container {
      width: 300px;
      height: 200px;
      border: 1px solid #000000;
      overflow: hidden;
      position: relative;
  }
  
  .article-img-holder {
      width: 100%;
      height: 100%;
      background: url(https://awik.io/demo/background-image-zoom/traffic2.jpg);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      transition: all 1s;
  }
  
  .article-img-holder:hover {
      transform: scale(1.2);
  }
  
  .split-image-links {
      width: 100%;
      height: 100vh;
      display: flex;
  }
  .split-image-links .split-image-link {
      width: 25%;
      height: 100%;
      overflow: hidden;
      position: relative;
  }
  .split-image-links .split-image-link .zoom-image {
      width: 100%;
      height: 100%;
      cursor: pointer;
      position: relative;
  }
  .split-image-links .split-image-link .zoom-image .split-image-header {
      z-index: 1;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
      color: #fff;
  }
  .split-image-links .split-image-link .zoom-image .zoom-image-headline {
      color: #fff;
      text-align: center;
      line-height: 100vh;
      font-family: 'Poppins';
      text-transform: uppercase;
      font-size: 45px;
      font-weight: 600;
  }
  .split-image-links .split-image-link .zoom-image.zoom-image-first {
      background: linear-gradient(
            rgba(0, 0, 0, 0.4), 
            rgba(0, 0, 0, 0.4)
          ), url(https://api.time.com/wp-content/uploads/2020/07/jeff-bezos.jpg?quality=85&amp;w=1024&amp;h=628&amp;crop=1);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      transition: all 0.5s;
  }
  .split-image-links .split-image-link .zoom-image:hover {
      transform: scale(1.1);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;div class="split-image-links"&gt;
          &lt;div class="split-image-link"&gt;
              &lt;div class="zoom-image zoom-image-first"&gt;
                  &lt;h1 class="zoom-image-headline"&gt;who&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>