How to make scale background zooming only on image (not on child elements)

Question

Below is my example. Maybe anyone else has the same issue. For example my div named .description-container is moving together with the main container .one-more-container.

$('div').removeClass('one-more-container');

.one-more-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.one-more-container .single-featured-background {
  transform: scale(1.05);
  transition: all 3s;
}

.single-featured-background {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center bottom;
  transition: all 3s;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one-more-container">
<div id="post" class="single-featured-background" style="background-image: url('<?php echo $thumb['0'];?>')">
    <div class="super-title-container">
        <h1 class="super-title"><?php the_title(); ?></h1>
        <div class="description-container">
            <h2><?php the_field('antraste'); ?></h2>
            <p><?php the_field('aprasymas'); ?></p>
        </div>      
    </div>
</div>

Answer 1

You can create a separate element only for background. And you can animate that element only.

setTimeout(function(){
  $('div').removeClass('one-more-container');
},3000);

.one-more-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}


.single-featured-background {
  position:relative;
  height: 100vh;
  overflow: hidden;
}
.onlyBg{  
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
  transition: all 3s;
}

.one-more-container .onlyBg {
  transform: scale(1.5);
  transition: all 3s;
}

.super-title-container{
  position:relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one-more-container">
<div id="post" class="single-featured-background" >
    <div class="onlyBg" style="background-image: url('http://via.placeholder.com/350x150')"></div>
    <div class="super-title-container">
        <h1 class="super-title">title</h1>
        <div class="description-container">
            <h2>sub title</h2>
            <p>paragraph</p>
        </div>      
    </div>
</div>