Is there a way to tint only the white elements in the navbar when they are clicked, rather than applying the color overlay to the entire image? I have tried different methods but have not been able to achieve this effect. Ideally, I would like the white parts of the image to multiply with the specified color, similar to the multiply function in Photoshop.
.wrap {
position:relative;
}
.wrap:before {
content:"";
position: absolute;
top:0;
left:0;
height:100%;
width:100%;
background: rgba(255,0,0,0.5);
z-index:999;
}
<div>
<button class="button button-clear" style="margin: 5px;" routerLinkActive="active" [routerLink]="[route]">
<div class="wrap">
<img *ngIf="icon!==undefined" [src]=icon>
</div>
<a *ngIf="text!==undefined">{{text}}</a>
</button>
</div>