Navaneeth Venugopal Navaneeth Venugopal - 9 days ago 6
CSS Question

How to make zooming only to background image?

I have created a example to zoom in and out background image.



@-webkit-keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% { }
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;
;
}
}
@-moz-keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% { }
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;

}
}
@-ms-keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% { }
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;
;
}
}
@keyframes snow {
0% { background-position: 0px 0px; }
50% { }
100% {
background-position: 5px 1000px;

}
}

div{
width:100%;height:100vh;
background-image:
url('http://www.planwallpaper.com/static/images/Fall-Nature-Background-Pictures.jpg');background-size:100% 100%;position:fixed;top:0;left:0;width:100%;height:100vh;
animation: zoom 30s infinite;
text-align:center;
}
h1{
color:#fff;
font-size:50px;
}
@keyframes zoom {
0% { transform:scale(1,1); }
50% { transform:scale(1.2,1.2); }
100% {
transform:scale(1,1);
}
}

<div><h1>OVER TEXT</h1></div>





In given example heading text also zoom with background image.I want background image zoom only. Don't want to zoom contents in that DIV.

In given example heading text also zoom with background image.I want background image zoom only. Don't want to zoom contents in that DIV.

In given example heading text also zoom with background image.I want background image zoom only. Don't want to zoom contents in that DIV.

Answer

The problem is that in your case creating the zoom effect with transform: scale will scale the whole div including the content.

To achieve what you want simply change this part of your code

@keyframes zoom {
    0% { 
      transform:scale(1,1); 
    }
    50% { 
      transform:scale(1.2,1.2); 
    }
    100% {
      transform:scale(1,1); 
    }
}

to this

@keyframes zoom {
  0% {
    background-size: 100% 100%;
  }
  50% {
    background-size: 120% 120%;
  }
  100% {
   background-size: 100% 100%;
  }
}

div {
  width: 100%;
  height: 100vh;
  background-image: url('http://insidestorybox.com/mudmax-ui/images/banner2.jpg');
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  animation: zoom 30s infinite;
  text-align: center;
}
h1 {
  color: #fff;
  font-size: 50px;
}
@keyframes zoom {
  0% {
    background-size: 100% 100%;
  }
  50% {
    background-size: 120% 120%;
  }
  100% {
    background-size: 100% 100%;
  }
}
@keyframes snow {
  0% {
    background-position: 0px 0px;
  }
  50% {} 100% {
    background-position: 5px 1000px;
  }
}
<div>
  <h1>OVER TEXT</h1>
</div>