I am trying to do a popup animation and its harder than i thought. I want to make the monkey’s inside the circle div to disappear partly inside the circle when they “pop down”. The way its supposed to be with a whack a mole game. I cant figure out how to do it.
please help me figure this out. bump
For your .dot class, add
position:relative;
overflow:hidden;
And for the img add
position:absolute;
left: 50%;
transform: translateX(-50%);
can you explain why these properties would work?
I am shocked translateX would work. Why was it not translateY since i wanted it to go up and down whereas translateX would be left and right movement?
Well, translateY would work too, when i saw your code, i think it was already moving up and down, i don’t remember clearly, but it was outside the black hole div, i just adjusted it to be in the center, that’s the reason i used translateX, nothing more than that, you need not even make the monkey as absolute, relative would be fine too
but what feature made it disappear in the div? i dont understand.
.dot is the parent to img, when dot and img is given a relative position or img has a absolute position, then it means .dot class contains the img, therefore img moves within the dot div based on your animation up and down.
Since the img overflows the parent container, applying overflow hidden to the parent makes the img to be hidden when it goes beyond the parent.