How can I make the ripple only appear only in the div that has the image and not in the whole column item?

I’m trying to make the ripple effect appear as far as the div that the image has, but as you can see in the image, the ripple effect goes to the limit of the grid column, and there is not the limit of the div that the image has. background image.

This is my code:

    <ion-row>
      <ion-col *ngFor="let categorie of categoriesMarket" size="6">
        <div
          class="category ion-activatable ripple-parent"
          [defaultImage]="'../../../../../assets/auth/backgrounds/main.jpg'"
          [lazyLoad]="categorie.background"
        >
          <ion-ripple-effect></ion-ripple-effect>
          <div class="overlay">
            <p [ngClass]="{'title': categorie.id == 3}">{{ categorie.name }}</p>
          </div>
        </div>
      </ion-col>
    </ion-row>

These are my style classes:

.category {
  width: 100%;
  height: 9.375rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 0.9375rem;

  .overlay {
    display: flex;
    flex-direction: column;
    justify-content: left;
    text-align: left;
    width: 100%;
    height: 100%;
    background-color: rgb(0000, 0000, 0000, 0.2);
    padding: 10px;
    border-radius: 0.9375rem;

    P {
      color: #fff;
    }

    .title {
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}

The effect I have right now that you don’t want it to be like this:

2 posts - 1 participant

Read full topic