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: