Is Possible To Get Transparent Text Over All Layers In Colored Background Container?

What i want to achive is button on hover - background turn to white, text turn to transparent, keep in mind that body is filled with some image i my case, run my snippet. In other

Solution 1:

When you set mix-blend-mode to hard-light, gray becomes transparent.

(Not supported by IE or Edge)

You can use it this way:

button {
  padding:10px;
  border:solid 5px#fff;
  color: #fff;
  background: none;
  font-weight: bold;
  font-size:2em;
}

button:hover {
  color: gray;
  background-color: white;
  mix-blend-mode: hard-light;  
}


body {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Mallard2.jpg/1280px-Mallard2.jpg");
  background-size: 200px;
  background-repeat: no-repeat;
}

<button>BUTTON</button>

Solution 2:

You can use the CSS attribute background-clip: text; A full tutorial can be found here: https://css-tricks.com/how-to-do-knockout-text/