CODEWITHSUNDEEP
htmlcssanimation
Guy
Guy

Reputation: 1597

Nested div background animation appears above parent background image

I have a div with a background image.

Inside this div, I have another div, that has an animation on its scale and opacity, and it makes kind of a ripple effect around the parent image.

<div class="image">
   <div class="ripple"></div>
</div>

The image has a fixed positioning, because it supposed to be at the top of the screen. The ripple div has an absolute positioning (can be also relative), and the animation should start from the center of the image.

The problem is that the nested div animation appears above the parent div. I want the image to be at the top, and the animation behind it.

I've tried different solutions, including z-indexes, and negative z-index, but it looks the same.

Demo for the problem: http://jsfiddle.net/m271h3s6/1/.

You can see in the demo that the black circle appears above google's logo. I want the logo to be always above the animation.

Upvotes: 0

Views: 432

Answers (2)

divy3993
divy3993

Reputation: 5810

Just add one more element(here i have added span) with some class(here: parent_image) which will be over the ripple effect child.

Why use of <span>: It is because it will not leave any white space, as is inline element.

Have a look:

.parent {
    position: fixed;
    top: 100px;
    width: 100%;
    height: 200px;
}

.child {
    position: absolute;
    animation: ripple 10s 0.5s ease-out infinite;
    background-color: #000;
    opacity: 0.9;
    width: 2px;
    height: 2px;
    border-radius: 1px;
    left: 50%;
    top: 100px;
}

.parent_image
{
background:url("http://res.cloudinary.com/demo/image/fetch/fl_png8/https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png") no-repeat center;
    position:absolute;
    width: 100%;
    height: 100%;
}

@keyframes ripple {
        0% {
          transform: scale(1);
          opacity: 0.9;
        }
        80%, 100% {
          transform: scale(500);
          opacity: 0;
        }
<div class="parent">
    <div class="child"></div> 
    <span class="parent_image"> </span>
</div>

Upvotes: 1

Pouya Ataei
Pouya Ataei

Reputation: 2169

Interesting question, well the flow is like this, assign these properties to your parent div ; 

  position: absolute;
  top: 40px; //optional
  left: 40px; //optional
  transform: scale(1.5, 1.5);

And based on how much of your image you would like to cover with animations, you've gotta come up with several divs (even up to 36 divs in some cases!) whereas each div is taking responsibility in providing underlying animation on the background, this snippet can be the sample of your child div; 

  position: absolute;
  top: 0px;
  width: 14px;
  height: 240px;
  background: url("http//:yourimage");
  animation: wobble 3s infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;

And the sub-child elements that are taking care of the exact animation sites, would be something like this; 

.column:nth-child(1) {
  left: 10px;
  background-position: -10px 0;
  animation-delay: 30ms;
}
.column:nth-child(2) {
  left: 20px;
  background-position: -20px 0;
  animation-delay: 60ms;
}

.column:nth-child(3) {
  left: 30px;
  background-position: -30px 0;
  animation-delay: 90ms;
}
.column:nth-child(4) {
  left: 40px;
  background-position: -40px 0;
  animation-delay: 120ms;
}
 /// . and even more...

A very good example can be found here; Animation on Background

Upvotes: 0

Related Questions