How do I prevent keyframes from pushing my text in CSS?

Question

I currently want the top part of my webpage to have an image zooming out. However, this pushes all of the text that I have that includes buttons and my header. My background image is moving like I want it to, but my header and buttons are moving too and I don't want them to move at all.

    <div className="static-slider-head banner2">
      <Container>
        <Row className="">
          <Col lg="6" md="6" className="align-self-center intro">
            <h1 className="title">
              Welcome
            </h1>
            <h4 className="subtitle font-light">
            Filler Text
            </h4>
            <a
              href="/"
              className="btn btn-danger m-r-20 btn-md m-t-10 "
            >
              Filler Text
            </a>
            <a
              href="/"
              className="btn btn-success m-r-20 btn-md m-t-10 " target="_blank"
            >
              Filler Text <i className="fa fa-instagram"></i> 
            </a>
          </Col>
          <Col lg="6" md="6">
          </Col>
        </Row>
      </Container>
    </div>

.static-slider-head {
  min-height: 36.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: auto;
  background-size: cover;
  background-position: center center;
  display: table;
  width: 100%;
  padding: 0;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,1)), url('../../public/top2.png') center center no-repeat;
  background-color: #e5e5e5;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  animation: scale 10s;
  animation-fill-mode: forwards;
  transform-origin: bottom right;
  overflow: hidden;
  .title {
    color: $white;
    font-weight: 700;
    font-size: 70px;
    line-height: 100px;
  }
  .subtitle {
    color: $white;
    line-height: 30px;
  }
}
@keyframes scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

My text and header all shift to the left. I want them to not move. I only want the image to move.

Answer 1

So what I would do is have the div with the image that's doing the scale just be a div on its own, not acting as a parent div. Then I'd wrap all your content (minus the static-slider-head div) into a container, and then wrap all of those into a main wrapper.

You can then add this code to your CSS which will position your text according to the main wrapper div and not the div that is expanding.

.container {
  position: absolute;
  top: 0;
  left: 0;
} 

.mainwrap {
  position: relative;
}

Here is a working example:

 .static-slider-head { min-height: 36.25rem; display: flex; flex-direction: column; justify-content: center; overflow: auto; background-size: cover; background-position: center center; width: 100%; padding: 0; background:linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,1)), url('../../public/top2.png') center center no-repeat; background-color: #e5e5e5; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; animation: scale 10s; animation-fill-mode: forwards; transform-origin: bottom right; overflow: hidden; .title { color: $white; font-weight: 700; font-size: 70px; line-height: 100px; }.subtitle { color: $white; line-height: 30px; } }.container { position: absolute; top: 0; left: 0; }.mainwrap { position: relative; } @keyframes scale { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }

 <div class="mainwrap"> <div class="static-slider-head banner2"></div> <div class="container"> <Container> <Row class=""> <Col lg="6" md="6" class="align-self-center intro"> <h1 class="title"> Welcome </h1> <h4 class="subtitle font-light"> Filler Text </h4> <a href="/" class="btn btn-danger mr-20 btn-md mt-10 " > Filler Text </a> <a href="/" class="btn btn-success mr-20 btn-md mt-10 " target="_blank" > Filler Text <i class="fa fa-instagram"></i> </a> </Col> <Col lg="6" md="6"> </Col> </Row> </Container> </div> </div>

Answer 2

May be something like this might be a way to do this: using background-size css property in @keyframes animation.

 @keyframes zooming { 0% { background-size: 100% 100%; } 50% { background-size: 300% 300%; } 100% { background-size: 100% 100%; } }.header-with-bg-animation { background-image: url('https://images.unsplash.com/photo-1668462503626-1309916ca702?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2970&q=80'); animation-name: zooming; animation-duration: 4s; animation-iteration-count: infinite; background-repeat: none; background-position: center; width: 100%; height: 200px; }.header-content { color: #FFF; text-align: center; padding: 40px 20px 20px 20px; }.header-content *{ background: rgba(0, 0, 0, .45); }

 <div class="header-with-bg-animation"> <div class="header-content"> <h3>Title</h3> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown...</p> <a>Click me +1</a> </div> </div>

Answer 3

I used the following and was able to zoom out and keep zoomed out without it repeating. This solution also helped me not needing to modify positions and did not need to fix styling.

.static-slider-head {
  min-height: 36.25rem;
  display: flex;

  background-color: #D8BAE6;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,1)), url('../../public/top2.png') center center no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  background-size: 110%;
  background-position: center center;
  animation: shrink 2s alternate;

  .title {
    color: $white;
    font-weight: 700;
    font-size: 42px;
    line-height: 54px;
  }

  .subtitle {
    color: $white;
    line-height: 30px;
  }
}
@keyframes shrink {
  0% {
    background-size: 100%;
  }
  100% {
    background-size: 110%;
  }
}