How to limit a transform scale to the width and height of the parent element in CSS?

Question

I'm triying to make a ripple animation.

This is the class:

.ripple {
    background: rgba(0,0,0,0.15);
    border-radius: 100%;
    width:100px;
    height:100px;
    animation: anim 0.5s ease-out;
    position: absolute;
    left:5%;
    top:5%;
    transform: scale(0);
    pointer-events: none;
}

and this is the animation:

@keyframes anim {
    to {
         transform: scale(2);
         opacity:0;
    }
}

This is the html:

<div id="red">
    <div class="ripple"></div>
</div>

I'm stuck triying to limit the ripple animation so it doesn't exceed the width and height of the parent node.

This is my fiddle:

http://jsfiddle.net/wx25q5bo/1/

What should I change in my code in order to get this effect:

http://codepen.io/anon/pen/WbMEEp

Thanks in advance!

Answer 1

Add overflow: hidden to your parent element(#red). And change the position:absolute to position: relative. And I guess you will need to use JavaScript to figure out the click position in next step.