CODEWITHSUNDEEP
css
Boel
Boel

Reputation: 976

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

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!

Upvotes: 4

Views: 3992

Answers (2)

Justin Breiland
Justin Breiland

Reputation: 460

This should work for you, made the animation occur on hover of #red. Fiddle here

Css

#red {
  width: 100px;
  height: 100px;
  background: red;
  overflow:hidden;
  position: relative;
}

#red:hover .ripple {
  background: rgba(0,0,0,0.25);
  border-radius: 100%;
  width:100px;
  height:100px;
  transform: scale(0);
  margin: 0 auto;
 -moz-animation: anim 0.5s ease-out;
 -webkit-animation: anim 0.5s ease-out; 
}

Upvotes: 1

Linghanmin Liu
Linghanmin Liu

Reputation: 76

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.

Upvotes: 3

Related Questions