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?"