How can I make this bucket where I can throw this ball into using css

user_14663369 0
Viewed 107

I have this project where I need to make a animation where I have a bucket and a ball throwing into the bucket so you can see the ball go inside this bucket. In order for this to work, I have 2 pictures of the same bucket. Number 1 is for the back, and nr. 2 is for the front, I had an idea to use background-image: cover but I cannot figure out how to make this work, heres an illustration enter image description here

This is mmy progress so far with other bucket picture: enter image description here

 .back {
        background-size: cover;      
        
    }
    
    .front {
    
    
    }
    
<div class="back"> <img src="behind.png" ></div>
<div class="front"> <img src="infront.png" ></div>

css-animations css html
1 Answers

You will need at least two layers and then you play with z-index. Hover the below and see:

.box {
   /* first layer as background */
   background:url(https://i.stack.imgur.com/WhSft.png) top/100% auto no-repeat;
   display:inline-block;
   width:200px; /* control the size by editing this */
   margin:80px 50px;
}
.box::before {
  content:"";
  display:block;
  padding-top:100%; /* keep square */
  position:relative;
  z-index:9; /* we increase z-index to make other element behind */
  background:inherit; /* we inherit the same background */
  background-position:bottom; /* we change the position to get the next image */
}


.ball {
   position:absolute;
   width:40px;
   height:40px;
   background:red;
   border-radius:50%;
   left:130px;
   top:0;
   transition:1s;
}

html:hover .ball{
  top:200px;
}
<div class="box">

</div>

<div class="ball"></div>

The image I have used after editing (black is transparency)

enter image description here

user_86203330
Related