Is there any way to remove overflow from the bottom of a container?

void__ 0
Viewed 69

Is there any way to remove overflow: hidden from the top and right part of the box? I don't want dog's ear and nose clipped at the end of animation. At 60%,100% position the dog's nose and ear should not be clipped but his body at the bottom and left should be clipped so that it looks like he put his head through the hole. I thought of using clip-path I cannot find a shape to do it. Is there any css property or technique to do this? Please help.

.box {
  width: 500px;
  height: 500px;
  background-color: orange;
  overflow: hidden;
  border-radius: 50%;
}

.dog {
  width: 115%;
  height: 115%;
  animation: dogPeeking 5s linear infinite alternate;
}

@keyframes dogPeeking {
  0% {
    transform: translate(-50%, -10%) rotateY(180deg);
  }
  60%,100% {
    transform: translate(10%, -10%) rotateY(180deg);
  }
}
<div class="box">
  <img src="https://res.cloudinary.com/ddq2p90tz/image/upload/v1662628751/dog_dr7izv.png" alt="dog" class="dog" />
</div>

css-animations javascript css html
2 Answers

You can try an approach for multiple layers with the half-circles. The left circle will be the main layer (which you're using right now), and the right circle will be under the dog layer.

.box {
  width: 550px;
  height: 500px;
  position: relative;
  overflow: hidden;
  border-top-left-radius: 250px;
  border-bottom-left-radius: 250px;
}

.box::before {
  content: '';
  width: 500px;
  height: 500px;
  position: absolute;
  border-top-right-radius: 250px;
  border-bottom-right-radius: 250px;
  z-index: 0;
  left: 0;
  top: 0;
  background-color: orange;
}

.dog {
  width: 100%;
  height: 115%;
  z-index: 1;
  position: absolute;
  transform: rotateY(180deg);
  animation: dogPeeking 5s linear infinite alternate;
}

@keyframes dogPeeking {
  0% {
transform: translate(-50%, 0) rotateY(180deg);
  }
  60%,100% {
transform: translate(0, 0) rotateY(180deg);
  }
}
<div class="box">
    <img src="https://res.cloudinary.com/ddq2p90tz/image/upload/v1662628751/dog_dr7izv.png" alt="dog" class="dog"/>
</div>

Nick Vu0 

Try adding some positioning to your dog class like this,
.box {
  position: relative;
  top: 10%;
  width: 115%;
  height: 115%;
  animation: dogPeeking 5s linear infinite alternate;
}

Shan Joel0
Related