Sojtin Sojtin - 2 months ago 13
CSS Question

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 words i want make a hole in button background with shape of given text and transparency



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

button:hover {
color: transparent;
background: #fff;
}


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>




Answer

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>

Comments