画像だけ拡大したいですが文字まで拡大する


animationで説明文章の背景画像だけ大きくしたいですが、できません  
説明にだけ1.1の逆数を掛けましたがこれでもうまく動きません

簡単にできると思ったんですが、できず、助けてください(T_T)  
できればJavascriptは使わずに済ませたいです

[code]

    .container-panel {
      width: 500px;
      height: 500px;
      overflow: hidden;
    }
    
    .panel-desc {
      background: url(background_hero.jpg);
      background-size: cover;
      width: 100%;
      height: 100%;
      animation: zoom 3s;
    }
    
    .desc {
      animation: nozoom;
    }
    
    @keyframes zoom {
      100% {
        transform: scale(1.1, 1.1)
      }
    }
    
    @keyframes nozoom {
      100% {
        transform: scale(0.9, 0.9);
      }
    }
[/code]

[code]

    <div class="container-panel">
      <div class="panel-desc">
        <div class="desc">画像の説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明</div>
      </div>
    </div>
[/code]




こんな感じですか？

[code]

    .container-panel {
      width: 500px;
      height: 500px;
      overflow: hidden;
    }
    
    .panel-desc {
      background: url(https://cdn.sstatic.net/Sites/ja/Img/sprites.svg?v=d62ac906bcbf);
      background-size: cover;
      width: 100%;
      height: 100%;
      animation: zoom 3s;
    }
    
    .desc {
      animation: nozoom;
      position:absolute;
      z-index:1;
    }
    
    @keyframes zoom {
      100% {
        transform: scale(1.1, 1.1)
      }
    }
    
    @keyframes nozoom {
      100% {
        transform: scale(0.9, 0.9);
      }
    }
[/code]

[code]

    <div class="container-panel">
        <div class="desc">画像の説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明</div>
      <div class="panel-desc">
      </div>
    </div>
[/code]




こんな感じですか？

[code]

    .container-panel {
      width: 500px;
      height: 500px;
      overflow: hidden;
    }
    
    .panel-desc {
      background: url(https://cdn.sstatic.net/Sites/ja/Img/sprites.svg?v=d62ac906bcbf);
      background-size: cover;
      width: 100%;
      height: 100%;
      animation: zoom 3s;
    }
    
    .desc {
      animation: nozoom;
      position:absolute;
      z-index:1;
    }
    
    @keyframes zoom {
      100% {
        transform: scale(1.1, 1.1)
      }
    }
    
    @keyframes nozoom {
      100% {
        transform: scale(0.9, 0.9);
      }
    }
[/code]

[code]

    <div class="container-panel">
        <div class="desc">画像の説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明</div>
      <div class="panel-desc">
      </div>
    </div>
[/code]

