css Masking Problem
 

Hi zusammen,

ich versuche mich gerade an masking in css und irgendwie krieg ich es nicht hin.
Was ich gerne erreichen möchte:
Ich habe eine png-Datei mit einer weißen grafik und transparentem Hintergrund und eine vollflächig einfarbige png-Datei.
Die 2. setze ich als src in einem img. Die 1. nehme ich als mask.
Ziel soll sein, dass die weiße Grafik in der Farbe erscheint die in der vollflächigen enthalten ist.

Hintergrund:
Ich will ermöglichen, dass Benutzer einfache Icons in png-Format (nur weiße Grafik und transparenter Hintergrund) hochladen können und diese dann bei einem hover die Farbe wechseln. So müssen die Benutzerdas Einfärben nicht selber machen.

Geht das überhaupt? Oder hab ich das mit der mask da falsch verstanden?

<img src="URL-zum-vollflächigen-Bild" class="masked">

.masked{
mask-image:url(URL-zum-weiß/transparent-Icon);
}

Hat jemand eine Idee?