[sloved] Help in my code to get Wriple effect using css

Question

Here I have red wriple in code.it is increasing but it not showing wriple like effect as it's size is increasing w.r.t refrence point at top left of green box. But w.r.t to center of circle.

Target:-
Wriple size should increase but it's center should remain fixed.

https://code.sololearn.com/WMWCjmf8IVvI/?ref=app

Answer 1

This is due to width and height.it is not correct.

Here try this instead of:

@keyframes wriple{
100%{ transform:scale(4,4);}
}

Answer 2

It's nice
but it also incresing the width of wriple wave.

Answer 3

Add overflow:hidden to the container
also you need to position absolute the ripple container, and you have to add the container within the ripple container

or you could use pseudo class after and before to create ripple effect

Answer 4

See the ripple effect on the list elements
https://code.sololearn.com/WezvExlz043M/?ref=app