Ionic - Ripple effect manually


hi, so is it working on v3.20.0 ?


It’s working for me in v3.20.0. Perfectly, in fact!


hey im currently working on this, but still cant

i need to use this m-ripple-effect on my ion-card
already makes the directive as you show

but please take a look to my codes please


<div text-center>   
  <h4 text-center>Categories</h4>
      <ion-card m-ripple-effect tappable  class="categories-card">
        <div class="button-effect"></div>             
              <ion-col text-center >
                  <img class ="center" src="assets/imgs/logo/home-icon-silhouette.png"  />


.categories-card {
      position: relative; 
      overflow: hidden;
      border-radius: 10px;
      width: 74px !important;
      height: 60px !important;
      display: inline-block;
      margin: 7.5px !important;
      box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

did i code wrong? so sorry still learning , im a student lol


You should remove the manually added button-effect div because m-ripple-effect adds the same one.

If you need a ripple effect over the image try to adjust z-index of the button-effect via styles:

.categories-card .button-effect {
  z-index: 1;