how to background pic zoom animate without affecting the elements inside

Question

I am trying to zoom in to the background but the elements inside the div get affected by it. I tried using this part with transform scale but the elements get zoomed in with the bg zoom in

.img-background {
  background-image: url(./img.jpg);
  height: 100vh;
  width: 100vw;
  background-repeat: no-repeat;
  position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: 48% 10%;
  }

.bg-img-animate {
  animation-name: bg-animate;
  animation-duration: 3s;
  animation-iteration-count: 1;

  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@keyframes bg-animate {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(2);
  }
}

js

 
         text

user_6094348 · Answer

Instead of having a background image on an element, place the img element inside the element whose background you want to set as an image. Scale the image instead of the container element. Set position of other child elements as absolute so they are placed over the image

.container {
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 50px auto;
  position: relative;
  overflow: hidden;
}

.container img {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

.container img:hover {
  transform: scale(1.2);
}

.container div {
  position: absolute;
  border: 2px solid #fff;
  padding: 15px;
  background: #eee;
  height: 100px;
  width: 100px;
  text-align: center;
  line-height: 100px;
}


    
    
      Hello World

how to background pic zoom animate without affecting the elements inside

1 Answers