Skip to content Skip to sidebar Skip to footer

How To Make Zooming Only To Background Image?

I have created a example with keyframe to zoom in and out background image. It's work but also zooming inner text. In given example heading text also zoom with background image. I

Solution 1:

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: 0px0px;
  }
  50% {} 100% {
    background-position: 5px1000px;
  }
}
<div><h1>OVER TEXT</h1></div>

Solution 2:

There is no CSS and no image in your example. I think, that you use the bg img for the div-container? I think the best way to do that, would be to use a wrapper.

Do not attach the bg img to the wrapping div, but to an child element of it:

.wrap {
  width: 100%;
  height: 400px;
  position: relative;
}

.bgImg {
  background-image: url('http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg');
  background-size: cover;
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

h1 {
 position: relative;
  z-index: 1;
}
<divclass="wrap"><divclass="bgImg"></div><h1>Headline</h1></div>

Now you can use your animation to this new container.

Post a Comment for "How To Make Zooming Only To Background Image?"